html, body { height: 100%; margin: 0; font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; color: #1d1f22; }
#map { position: absolute; inset: 0; right: 360px; }
#sidebar {
  position: absolute; top: 0; right: 0; bottom: 0; width: 360px;
  background: #fafafa; border-left: 1px solid #ddd; overflow-y: auto;
  padding: 14px 16px; box-sizing: border-box;
}
h1 { font-size: 14px; margin: 0 0 4px; letter-spacing: 0.02em; }
.subtle { color: #6a6f78; font-size: 11px; margin-bottom: 12px; }

/* Per-panel data-source citation: a small, muted line under each panel that
   surfaces a tracked source. Sits flush at the panel bottom (no margin). */
.attribution { color: #9aa0a6; font-size: 10px; line-height: 1.35; margin-top: 8px; }
.attribution a { color: #7a808a; text-decoration: none; }
.attribution a:hover { text-decoration: underline; }

/* Consolidated "Източници" (Sources) block — a collapsible catch-all. */
#sources-panel { border-bottom: none; }
#sources-details > summary { cursor: pointer; font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: 0.06em; user-select: none; padding: 2px 0; }
.sources-list { list-style: none; margin: 8px 0 0; padding: 0; }
.sources-list li { color: #6a6f78; font-size: 11px; line-height: 1.4; margin-bottom: 6px; }
.sources-list a { color: #5a606a; text-decoration: none; }
.sources-list a:hover { text-decoration: underline; }
.sources-note { color: #9aa0a6; font-size: 10px; line-height: 1.35; margin-top: 4px; font-style: italic; }
.panel { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #e6e6e6; }
.panel h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #555; margin: 0 0 8px; }
.layer-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.layer-row input { margin: 0; }
.swatch { width: 14px; height: 14px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.2); }
.meta { font-size: 11px; color: #888; margin-left: auto; }
#status { font-size: 11px; color: #555; margin-top: 4px; min-height: 14px; }
#feature-info { font-size: 12px; }
#feature-info .kv { display: grid; grid-template-columns: 110px 1fr; gap: 4px 10px; margin-top: 6px; }
#feature-info .kv .k { color: #555; }
#feature-info .kv .v { word-break: break-word; }
#attrs { margin-top: 10px; }
#attrs .csv-block { margin-bottom: 14px; }
#attrs .csv-title { font-weight: 600; font-size: 11px; color: #333; margin-bottom: 4px; }
#attrs table { width: 100%; border-collapse: collapse; font-size: 11px; }
#attrs th, #attrs td { text-align: left; padding: 3px 6px; border-bottom: 1px solid #eee; vertical-align: top; }
#attrs th { color: #666; font-weight: 500; width: 45%; }
#attrs td { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#attrs .species-block { margin-top: 10px; border: 1px solid #e3e3e3; border-radius: 4px; padding: 6px 8px; background: #fff; }
#attrs .species-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: 11px; color: #2e5d33; margin-bottom: 4px; }
#attrs .species-head .slot { font-weight: 400; color: #888; font-size: 10px; }
.at-popup .at-stand { padding: 6px 0; border-top: 1px solid #eee; }
.at-popup .at-stand:first-of-type { border-top: none; }
.at-popup .at-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; margin-bottom: 4px; }
.at-popup .at-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.at-popup .at-chip { font-size: 10px; padding: 1px 6px; border: 1px solid; border-radius: 10px; background: #fff; }
#attrs .species-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; font-size: 11px; }
#attrs .species-grid .k { color: #666; }
#attrs .species-grid .v { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }
#attrs .section-label { margin: 10px 0 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: #888; }
button { font: inherit; padding: 5px 10px; border: 1px solid #aaa; background: #fff; border-radius: 4px; cursor: pointer; }
button:hover { background: #f0f0f0; }
.leaflet-popup-content { margin: 8px 12px; font-size: 12px; }
.leaflet-popup-content button { margin-top: 4px; }
/* Bottom-right species card: photo of the dominant tree species of the
   clicked stand, with a thumbnail strip of the other species present. */
#species-card {
  position: absolute; bottom: 16px; right: 376px; width: 400px;
  background: #fff; border: 1px solid #cfd3d8; border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18); overflow: hidden;
  font-size: 13px; z-index: 1000; display: none;
  max-height: calc(100vh - 32px); overflow-y: auto;
}
#species-card .sc-img { width: 100%; height: 240px; object-fit: cover; display: block; background: #eceff1; }
#species-card .sc-cap { padding: 7px 9px 8px; }
#species-card .sc-bg { font-weight: 600; font-size: 14px; color: #1b3d20; }
#species-card .sc-latin { font-style: italic; color: #6a6f78; font-size: 11px; }
#species-card .sc-share { font-size: 11px; color: #555; margin-top: 2px; }
#species-card .sc-strip { display: flex; gap: 4px; padding: 0 9px 8px; flex-wrap: wrap; }
#species-card .sc-thumb {
  width: 46px; cursor: pointer; border: 2px solid transparent; border-radius: 3px;
  padding: 0; background: none; line-height: 0;
}
#species-card .sc-thumb.active { border-color: #2e7d32; }
#species-card .sc-thumb img { width: 100%; height: 36px; object-fit: cover; border-radius: 2px; display: block; }
#species-card .sc-thumb .sc-tn { font-size: 8px; line-height: 1.1; color: #555; text-align: center; display: block; margin-top: 1px; }
#species-card .sc-foot { display: flex; justify-content: flex-end; align-items: center; padding: 5px 9px; border-top: 1px solid #eee; }
#species-card .sc-foot a { color: #888; font-size: 10px; text-decoration: none; }
#species-card .sc-foot a:hover { text-decoration: underline; }
/* Pinned top-right close, same for the image card and the bare compartment
   card. The chip background keeps the glyph legible over both the photo and
   white. z-index clears the image; absolute is relative to the card. */
#species-card .sc-controls { position: absolute; top: 6px; right: 6px; z-index: 2; display: flex; gap: 4px; }
#species-card .sc-close, #species-card .sc-collapse {
  width: 22px; height: 22px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; cursor: pointer;
  font-size: 15px; line-height: 1; color: #444;
  background: rgba(255,255,255,0.85); box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
#species-card .sc-close:hover, #species-card .sc-collapse:hover { background: #fff; color: #000; }
/* Collapsed: keep only the caption bar (drag handle) + controls visible. */
#species-card.sc-collapsed .sc-img,
#species-card.sc-collapsed .sc-strip,
#species-card.sc-collapsed .sc-forage,
#species-card.sc-collapsed .sc-foot,
#species-card.sc-collapsed .sc-noimg { display: none; }
#species-card.sc-collapsed { width: 260px; }
/* Drag handle (desktop only) — the caption bar moves the whole card. */
@media (pointer: fine) { #species-card .sc-cap { cursor: move; } }

/* Zoomable photos (tree card hero, mushroom thumbs) + the shared lightbox. */
img.zoomable { cursor: zoom-in; }
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,0.82); align-items: center; justify-content: center;
  cursor: zoom-out; padding: 24px;
}
.lightbox.open { display: flex; }
.lightbox .lb-img {
  max-width: 95vw; max-height: 95vh; object-fit: contain;
  border-radius: 4px; box-shadow: 0 8px 40px rgba(0,0,0,0.5); cursor: default;
}
.lightbox .lb-close {
  position: absolute; top: 16px; right: 20px;
  width: 36px; height: 36px; border: none; border-radius: 50%; cursor: pointer;
  font-size: 22px; line-height: 1; color: #222;
  background: rgba(255,255,255,0.9); box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.lightbox .lb-close:hover { background: #fff; }
#species-card .sc-noimg { height: 150px; display: flex; align-items: center; justify-content: center; color: #9aa0a6; font-size: 11px; }
/* Foraging scan */
.forage-btn { font-size: 12px; padding: 5px 10px; border: 1px solid #2e7d32; background: #e8f5e9; color: #1b5e20; border-radius: 4px; cursor: pointer; }
.forage-btn:hover { background: #d7eddb; }
.forage-btn:disabled { opacity: 0.6; cursor: progress; }
.forage-clear { font-size: 11px; padding: 4px 8px; border: 1px solid #ccc; background: #fafafa; color: #666; border-radius: 4px; cursor: pointer; }
#forage-status b { font-weight: 600; }
.forage-knobs { display: flex; gap: 10px; margin-bottom: 8px; }
.forage-knobs label { font-size: 11px; color: #555; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.forage-knobs select { font-size: 12px; padding: 3px 4px; border: 1px solid #ccc; border-radius: 4px; background: #fff; }
.forage-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-size: 10px; color: #555; }
.forage-legend .fl-item { display: inline-flex; align-items: center; gap: 3px; }
/* Choropleth ("Покривка") ramp legend — gradient mirrors likelihoodColor(). */
.surface-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; font-size: 10px; color: #555; }
.surface-legend .sl-ramp { width: 90px; height: 9px; border-radius: 2px; border: 1px solid #cdb9a6; background: linear-gradient(to right, #ddb892, #7f5539, #3a1f0d); }
.surface-legend .sl-label { color: #777; }
.surface-legend .sl-item { display: inline-flex; align-items: center; gap: 3px; }
.surface-legend .sl-sw { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.surface-legend .sl-proh { background: #ef5350; border: 1.5px solid #7f0000; }

/* ── Species filter tree (Family → Genus → Species) ───────────────────── */
#species-tree-wrap > summary { cursor: pointer; font-size: 11px; color: #444; padding: 4px 0; user-select: none; }
.species-tree-actions { display: flex; gap: 4px; margin: 4px 0 6px; flex-wrap: wrap; }
.species-tree-actions button {
  font-size: 10px; padding: 2px 6px; border: 1px solid #ccc; background: #f5f5f5;
  border-radius: 3px; cursor: pointer; color: #444;
}
.species-tree-actions button:hover { background: #ececec; }
.species-tree-filter {
  width: 100%; box-sizing: border-box; margin: 0 0 6px;
  font-size: 11px; padding: 4px 7px; border: 1px solid #ccc; border-radius: 4px;
  color: #333; background: #fff;
}
.species-tree-filter:focus { outline: none; border-color: #2e5d33; }
.species-tree {
  max-height: 360px; overflow-y: auto;
  border: 1px solid #e0e0e0; border-radius: 4px; padding: 4px 6px;
  font-size: 11px; background: #fff;
}
.species-tree details { margin: 1px 0; }
.species-tree details > summary {
  cursor: pointer; padding: 2px 0; user-select: none;
  list-style: none; display: flex; align-items: center; gap: 4px;
}
.species-tree details > summary::-webkit-details-marker { display: none; }
.species-tree details > summary::before {
  content: "▸"; display: inline-block; width: 10px; color: #999;
  transition: transform 0.1s;
}
.species-tree details[open] > summary::before { transform: rotate(90deg); }
.species-tree details[data-family] > summary { font-weight: 600; color: #2e5d33; }
.species-tree details[data-family] { padding-bottom: 2px; }
.species-tree details[data-genus] > summary { color: #555; }
.species-tree details[data-genus] { padding-left: 14px; }
/* Bulgarian family/genus name upright + prominent; Latin secondary, muted
   italic (mirrors the .tn-leaf em styling). */
.species-tree .tn-label { font-style: normal; }
.species-tree .tn-sci { color: #888; font-size: 10px; font-style: italic; font-weight: 400; margin-left: 2px; }
.species-tree .tn-leaf {
  display: flex; align-items: center; gap: 5px; padding: 2px 0 2px 28px;
  cursor: pointer; color: #333;
}
.species-tree .tn-leaf:hover { background: #f7f9fc; }
.species-tree .tn-leaf em { color: #888; font-size: 10px; font-style: italic; margin-left: 4px; }
.species-tree input[type="checkbox"] { margin: 0; cursor: pointer; }
@media (pointer: coarse) {
  .species-tree { font-size: 12px; max-height: 50vh; }
  .species-tree .tn-leaf { padding: 4px 0 4px 28px; }
  .species-tree details > summary { padding: 4px 0; }
}
/* Rainfall panel + legend */
#rain-modes label { font-size: 12px; cursor: pointer; }
.rain-legend { display: flex; align-items: center; gap: 0; margin: 8px 0 4px; }
.rain-legend .sw { width: 22px; height: 12px; }
.rain-legend .ticks { display: flex; justify-content: space-between; font-size: 9px; color: #888; margin-bottom: 4px; }
.rain-cell-popup .rc-day { display: grid; grid-template-columns: 42px 1fr 34px; gap: 6px; align-items: center; font-size: 11px; }
.rain-cell-popup .rc-bar { height: 8px; background: #3182bd; border-radius: 2px; }
.rain-cell-popup .rc-today { font-weight: 600; }
.rain-cell-popup .rc-v { text-align: right; font-family: ui-monospace, Menlo, monospace; }
/* Foraging section in the species card */
.sc-forage { padding: 7px 9px 4px; border-top: 1px solid #eee; }
.sc-forage .sf-head { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: #888; display: flex; justify-content: space-between; margin-bottom: 5px; }
.sc-forage .sf-row { display: grid; grid-template-columns: 40px 1fr auto auto; gap: 8px; align-items: center; padding: 3px 0; font-size: 12px; }
.sc-forage .sf-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-forage .sf-name .sf-lc { color: #aaa; font-size: 9px; }
.sc-forage .sf-thumb { width: 40px; height: 40px; border-radius: 3px; object-fit: cover; background: #eceff1; display: block; }
.sc-forage .sf-thumb-empty { background: repeating-linear-gradient(45deg, #f1f1f1 0 4px, #e5e5e5 4px 8px); }
.sc-forage .sf-dots { font-size: 10px; letter-spacing: 1px; width: 34px; text-align: center; }
.sc-forage .sf-on { color: #2e7d32; }
.sc-forage .sf-off { color: #d2d6db; }
.sc-forage .sf-lowconf { opacity: 0.6; }
/* Always-visible plain-language line: "why" sentence + compact factor bars.
   Sits between the species row and the (hidden) math breakdown. */
.sc-forage .sf-why { padding: 0 0 4px 48px; margin-top: -1px; }
.sc-forage .sf-why-txt { font-size: 10px; color: #6a6f78; line-height: 1.3; }
/* Haiku summary — three short lines, set apart, evocative but quiet. */
.sc-forage .sf-haiku { font-style: italic; color: #5a6b50; font-size: 11px; line-height: 1.45; text-align: center; padding: 6px 4px 8px; border-bottom: 1px dashed #e0e4dd; margin-bottom: 6px; }
.sc-forage .sf-note { font-size: 9px; color: #9aa0a6; margin-top: 4px; line-height: 1.3; }
.sc-forage .sf-cite { margin-top: 2px; }
.sc-forage .sf-cite a { color: #8a8f98; text-decoration: none; }
.sc-forage .sf-cite a:hover { text-decoration: underline; }
.sc-forage .sf-banner { font-size: 10px; padding: 4px 6px; border-radius: 3px; margin-bottom: 6px; line-height: 1.3; }
.sc-forage .sf-banner.prohibited { background: #fdecea; color: #9b1c1c; border: 1px solid #f5c2c0; }
.sc-forage .sf-banner.restricted { background: #fff6e5; color: #8a5a00; border: 1px solid #f3d79b; }
.sc-forage .sf-banner.allowed { background: #eef6ee; color: #2e6b35; border: 1px solid #c9e3cc; }
.sc-forage.is-prohibited .sf-row { opacity: 0.4; }
.sc-forage .sf-head-right { display: inline-flex; align-items: center; gap: 6px; }
.sc-forage .sf-math-toggle { font-size: 10px; color: #888; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 2px; }
.sc-forage .sf-math-toggle input { margin: 0; transform: scale(0.85); transform-origin: center; }
/* Per-species formula breakdown — hidden unless .show-math is on the wrapper.
   Two-column flex: SVG radar on the left, compact text on the right. */
.sc-forage .sf-math { display: none; padding: 2px 0 8px 6px; gap: 6px; align-items: center; }
.sc-forage.show-math .sf-math { display: flex; }
.sc-forage .sf-radar { flex: 0 0 132px; }
.sc-forage .sf-math-text { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; color: #6a6f78; line-height: 1.5; word-break: break-word; }
.sc-forage .sf-math-eq { color: #2e5d33; font-weight: 600; margin-bottom: 2px; }
.sc-forage .sf-math-raw { color: #9aa0a6; }
/* Geocoder panel — Nominatim-backed place search */
#geo-panel .geo-row { display: flex; gap: 6px; }
#geo-panel #geo-q { flex: 1; font: inherit; padding: 4px 6px; border: 1px solid #bbb; border-radius: 4px; min-width: 0; }
#geo-panel #geo-go { padding: 4px 10px; font: inherit; border: 1px solid #1565c0; background: #e3f2fd; color: #0d47a1; border-radius: 4px; cursor: pointer; }
#geo-panel #geo-go:hover { background: #bbdefb; }
#geo-panel #geo-status { font-size: 11px; color: #6a6f78; margin-top: 6px; min-height: 14px; }
#geo-results { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
#geo-results .geo-item { display: block; width: 100%; text-align: left; padding: 5px 8px; border: 1px solid #e0e0e0; background: #fff; border-radius: 4px; cursor: pointer; font: inherit; }
#geo-results .geo-item:hover { background: #f0f7ff; border-color: #1565c0; }
#geo-results .geo-name { font-weight: 600; font-size: 12px; color: #1d1f22; }
#geo-results .geo-sub { font-size: 10px; color: #888; margin-top: 1px; line-height: 1.3; }

/* ── Collapsible sidebar panels ───────────────────────────────────────── */
.panel h2 { display: flex; justify-content: space-between; align-items: center; }
.panel .panel-x {
  background: none; border: none; cursor: pointer;
  font-size: 13px; color: #888; padding: 2px 6px; line-height: 1;
  border-radius: 3px;
}
.panel .panel-x:hover { background: #ececec; color: #333; }
.panel.collapsed { padding-bottom: 0; border-bottom: 1px solid #e6e6e6; }
.panel.collapsed > *:not(h2) { display: none; }

/* ── Loading pill: shown whenever any tracked fetch is in flight ───────── */
#loading-pill {
  display: none;
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: 50%; transform: translateX(-50%);
  z-index: 1102;
  background: rgba(255,255,255,0.95);
  border: 1px solid #bbb;
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 11px;
  color: #444;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
body.is-loading #loading-pill { display: inline-flex; }
.lp-spin {
  width: 10px; height: 10px;
  border: 2px solid #999;
  border-top-color: transparent;
  border-radius: 50%;
  animation: lp-spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes lp-spin { to { transform: rotate(360deg); } }

/* ── Live-status pill: unified readout for rain warm-up, boot readiness,
   map-tile loading and forage-scan progress (public/app/live.js). Bottom-left
   so it clears the centred #loading-pill and the corner layers control.
   Hidden until it has items (the .visible class is toggled in JS). ────────── */
#live-status {
  display: none;
  position: fixed;
  left: 8px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  z-index: 1101;
  max-width: min(70vw, 420px);
  background: rgba(255,255,255,0.94);
  border: 1px solid #c4c8cd;
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 11px;
  color: #444;
  box-shadow: 0 2px 6px rgba(0,0,0,0.16);
  align-items: center;
  gap: 7px;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#live-status.visible { display: inline-flex; }
/* Small pulsing dot so the readout reads as "live" at a glance. */
#live-status .live-dot {
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2b8a3e;
  animation: live-pulse 1.4s ease-in-out infinite;
}
@keyframes live-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── Toast: brief top-centred status banner ──────────────────────────── */
#toast {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 44px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1102;
  background: #333;
  color: #fff;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  max-width: 90vw;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
#toast.visible { opacity: 1; }
#toast.toast-warn { background: #b71c1c; }

/* ── Locate-me control button (Leaflet topleft control) ───────────────── */
.leaflet-locate-btn {
  display: block;
  width: 30px; height: 30px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 4px;
  font: inherit;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  cursor: pointer;
  padding: 0;
}
.leaflet-locate-btn:hover { background: #f0f0f0; }
.leaflet-locate-btn.active {
  background: #e3f2fd;
  border-color: #1976d2;
  box-shadow: inset 0 0 0 1px #1976d2;
}
/* Coarse-pointer: bump the touch target a bit */
@media (pointer: coarse) {
  .leaflet-locate-btn { width: 36px; height: 36px; line-height: 34px; font-size: 18px; }
}

/* ── Drawer toggle: hidden on desktop ─────────────────────────────────── */
#drawer-toggle {
  display: none;
}

/* ── Drawer scrim: always rendered but invisible until sidebar is open ── */
#drawer-scrim {
  display: none;
}

/* ── Mobile layout (≤ 720px) ──────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Map fills the full viewport; sidebar slides in on top */
  #map { right: 0; }

  /* Sidebar becomes an off-canvas right drawer */
  #sidebar {
    width: 88vw;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 1100;
  }
  #sidebar.open {
    transform: translateX(0);
  }

  /* Semi-transparent scrim shown when drawer is open */
  #drawer-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.15);
    z-index: 1099;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  #drawer-scrim.visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* Species card: full-width, above the address bar */
  #species-card {
    right: calc(env(safe-area-inset-right, 0px) + 4vw);
    width: 92vw;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    max-height: 60vh;
  }

  /* Hamburger button: floating top-right */
  #drawer-toggle {
    display: block;
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    right: calc(env(safe-area-inset-right, 0px) + 8px);
    z-index: 1101;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 22px;
    line-height: 40px;
    text-align: center;
    background: #fff;
    border: 1px solid #bbb;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  }
}

/* Desktop: hide the toggle button above the breakpoint */
@media (min-width: 721px) {
  #drawer-toggle { display: none; }
  #drawer-scrim  { display: none !important; }
}

/* ── Coarse-pointer (touch) enhancements ──────────────────────────────── */
@media (pointer: coarse) {
  /* Larger checkbox/radio tap targets */
  .layer-row { padding: 6px 0; }
  .layer-row input { transform: scale(1.2); }

  /* Larger button tap targets */
  button, .forage-btn, #geo-go {
    padding: 8px 12px;
    min-height: 36px;
  }
}

/* ── Forage knobs: allow wrapping on narrow viewports ─────────────────── */
.forage-knobs { flex-wrap: wrap; }