*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #ffffff;
  --bg-alt:     #f5f7f4;
  --green:      #3a7d44;
  --green-hover:#2e6336;
  --green-light:#e8f0e9;
  --orange:     #e85d04;
  --text:       #1a1a1a;
  --text-secondary: #5a6b5c;
  --muted:      #8a9e8c;
  --border:     #dce5dd;
  --border-hover: #b0c4b2;
  --card-bg:    #ffffff;
  --shadow:     rgba(0,0,0,.07);
  --shadow-hover: rgba(0,0,0,.14);
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Header ──────────────────────────────────────────────────── */
header {
  background: var(--green);
  color: #fff;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  gap: 1rem;
  flex-shrink: 0;
}

.logo { display: flex; align-items: baseline; gap: 0; }
.logo-off   { font-size: 1.55rem; font-weight: 700; letter-spacing: -.5px; color: #fff; line-height: 1; }
.logo-nyc   { color: #F4C430; }
.logo-leash { font-size: 1.55rem; font-weight: 400; letter-spacing: -.5px; color: rgba(255,255,255,.75); line-height: 1; }
.logo-tag   { font-size: .72rem; color: rgba(255,255,255,.6); margin-left: .75rem; font-style: italic; }

.stats { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.stat { font-size: .78rem; color: rgba(255,255,255,.8); }
.stat strong { color: #fff; font-weight: 600; }
.stat-open strong { color: #ffd166; }
.stat-closed strong { color: #a8d5a2; }

/* ── Controls ─────────────────────────────────────────────────── */
#controls {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* Mobile bars (hidden on desktop) */
.mobile-bar { display: none; }
.mobile-report-bar { display: none; }

/* ── Data mode selector ──────────────────────────────────────── */
.data-mode-bar {
  display: flex;
  align-items: flex-end;
  padding: .55rem 2rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.data-mode-bar .control-group { flex-direction: row; align-items: center; gap: .5rem; }
.data-mode-bar label { margin: 0; white-space: nowrap; }
.data-mode-bar select { min-width: 180px; }

/* Filter panel visibility controlled by data-mode on #controls */
.filter-panel { display: block; }
#dogrun-filter-panel                                { display: none; }
#animal-filter-panel                               { display: none; }
#controls[data-mode="dogruns"] #filter-panel        { display: none; }
#controls[data-mode="dogruns"] #dogrun-filter-panel  { display: block; }
#controls[data-mode="animals"] #filter-panel        { display: none; }
#controls[data-mode="animals"] #animal-filter-panel  { display: block; }

/* Mobile report bar: show/hide mode-specific buttons */
.mobile-report-animals { display: none; }
#controls[data-mode="animals"] .mobile-report-complaints { display: none; }
#controls[data-mode="animals"] .mobile-report-animals    { display: flex; }
#controls[data-mode="dogruns"]  .mobile-report-complaints { display: none; }
.filter-panel-inner {
  padding: .75rem 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: flex-end;
}

.control-group { display: flex; flex-direction: column; gap: .28rem; }

label {
  font-size: .68rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .08em;
}

select {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 4px;
  padding: .42rem .65rem;
  font-size: .85rem;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s;
  min-width: 160px;
}
select:focus { outline: none; border-color: var(--green); }
select:disabled { opacity: .45; cursor: not-allowed; }
.control-group-park { width: 220px; }
#park-name-filter { width: 100%; }

.btn {
  padding: .47rem 1.2rem;
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .1s;
  align-self: flex-end;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .6; cursor: default; }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--green-hover); }
.btn-report-toggle { background: var(--orange); color: #fff; margin-left: auto; }
.btn-report-toggle:hover { background: #c94e00; }

/* ── Main layout ─────────────────────────────────────────────── */
main {
  display: grid;
  grid-template-columns: 1fr 380px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Map ─────────────────────────────────────────────────────── */
#map-container { position: relative; overflow: hidden; }
#map { width: 100%; height: 100%; min-height: 400px; }

/* Keep attribution ⓘ button collapsed while map is loading */
.map-loading .maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-inner { display: none !important; }
.map-loading .maplibregl-ctrl-attrib.maplibregl-compact::after { display: block; }

/* Map loading bar — thin animated bar at top of map */
.map-loading-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 10;
  background: rgba(0,0,0,.08);
  overflow: hidden;
}
.map-loading-bar-inner {
  height: 100%;
  width: 35%;
  background: var(--orange);
  border-radius: 0 2px 2px 0;
  animation: loadbar 1.2s ease-in-out infinite;
}
@keyframes loadbar {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* MapLibre popup overrides */
.maplibregl-popup-content {
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  line-height: 1.45;
  min-width: 180px;
  border-radius: 6px;
  box-shadow: 0 4px 16px var(--shadow-hover);
  padding: .75rem 1rem;
}
.maplibregl-popup-close-button { font-size: 1rem; color: var(--muted); padding: .25rem .5rem; }
.popup-content strong { font-size: .88rem; color: var(--text); display: block; margin-bottom: .3rem; }
.popup-meta { color: var(--text-secondary); margin-bottom: .25rem; }
.popup-resolution { font-size: .76rem; color: var(--muted); margin-top: .35rem; line-height: 1.4; }

/* ── List panel ──────────────────────────────────────────────── */
#list-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid var(--border);
  background: var(--card-bg);
}

.panel-header {
  padding: .65rem 1rem;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  min-height: 40px;
}
.panel-title { font-size: .72rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .08em; }
.count-badge { font-size: .7rem; background: var(--green); color: #fff; border-radius: 99px; padding: .1rem .55rem; font-weight: 600; line-height: 1.2; }

#complaint-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ── Complaint cards ─────────────────────────────────────────── */
.complaint-card {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.complaint-card:hover { background: var(--bg-alt); }
.complaint-card.active { background: var(--green-light); border-left: 3px solid var(--green); }

/* Dog run cards */
.dog-run-card.active { background: #e8f9fa; border-left: 3px solid #0096a0; }
.dog-run-badge {
  background: #e0f5f7;
  color: #005f69;
  border: none !important;
  font-size: .68rem !important;
  font-weight: 600;
  padding: .15rem .45rem;
  border-radius: 4px;
  white-space: nowrap;
}

/* Zip autocomplete */
.ac-wrap { position: relative; }
.zip-autocomplete-input {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 4px;
  padding: .42rem .65rem;
  font-size: .85rem;
  font-family: inherit;
  color: var(--text);
  width: 100%;
  transition: border-color .15s;
}
.zip-autocomplete-input:focus { outline: none; border-color: var(--green); }
.zip-autocomplete-input::placeholder { color: var(--muted); }
.ac-list {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-top: none;
  border-radius: 0 0 4px 4px;
  list-style: none;
  z-index: 200;
  box-shadow: 0 4px 16px var(--shadow);
}
.ac-list.open { display: block; }
.ac-item {
  padding: .42rem .65rem;
  cursor: pointer;
  font-size: .85rem;
  color: var(--text-secondary);
  transition: background .1s;
}
.ac-item:hover, .ac-item.active { background: var(--bg-alt); color: var(--text); }


.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
}
.card-address {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  flex: 1;
}
.card-status {
  font-size: .68rem;
  font-weight: 600;
  border-radius: 99px;
  padding: .15rem .5rem;
  flex-shrink: 0;
  white-space: nowrap;
}
.status-open   { background: #fff0e6; color: #c04a00; }
.status-closed { background: var(--green-light); color: var(--green-hover); }

.card-meta {
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  color: var(--muted);
}
.card-borough { text-transform: capitalize; font-size: .7rem; }
.card-date    { font-size: .7rem; }
.card-park    { font-size: .72rem; color: var(--text-secondary); font-style: italic; }
.card-park-unspecified { opacity: .5; }
.card-action  { font-size: .72rem; color: var(--text-secondary); padding: .05rem 1rem .3rem; }

/* ── Animal incident condition badges ───────────────────────── */
.animal-cond-badge {
  font-size: .72rem; padding: .15rem .45rem; border-radius: 4px;
  font-weight: 600; white-space: nowrap; border: none !important;
}
.cond-injured   { background: #fee2e2; color: #b91c1c; }
.cond-unhealthy { background: #fed7aa; color: #c2410c; }
.cond-doa       { background: #f1f5f9; color: #475569; }
.cond-healthy   { background: #dcfce7; color: #16a34a; }
.cond-na        { background: #f1f5f9; color: #64748b; }
.cond-unknown   { background: #f1f5f9; color: #64748b; }

/* ── State boxes ─────────────────────────────────────────────── */
.state-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  color: var(--muted);
  padding: 2.5rem 1.5rem;
  text-align: center;
  min-height: 200px;
}
.state-icon  { font-size: 2.6rem; opacity: .4; }
.state-title { font-size: .9rem; font-weight: 600; color: var(--text); }
.state-msg   { font-size: .8rem; max-width: 260px; line-height: 1.55; color: var(--text-secondary); }

.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin .65s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Footer ──────────────────────────────────────────────────── */
footer {
  text-align: center;
  padding: .65rem 1rem;
  font-size: .68rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
footer a { color: var(--muted); text-decoration: underline; }

/* ── Map report button ───────────────────────────────────────── */
.map-report-btn {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 99px;
  padding: .65rem 1.35rem;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(232,93,4,.35);
  transition: background .2s, box-shadow .2s;
  white-space: nowrap;
  opacity: 1;
}
.map-report-btn:hover {
  background: #c94e00;
}
.map-report-btn.animal-mode {
  background: var(--orange);
  cursor: pointer;
  opacity: 1;
  box-shadow: 0 2px 12px rgba(232,93,4,.35);
}
.map-report-btn.animal-mode:hover {
  background: #c94e00;
}
#map-container { position: relative; overflow: hidden; }

/* ── Report modal ────────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.modal-overlay.open { display: flex; }

.modal-box {
  background: var(--card-bg);
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,.2);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-title { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0; }
.modal-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--muted);
  cursor: pointer;
  padding: .2rem .4rem;
  border-radius: 4px;
  line-height: 1;
}
.modal-close:hover { background: var(--bg-alt); color: var(--text); }

.modal-body {
  overflow-y: auto;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.report-emergency {
  display: flex;
  gap: .85rem;
  align-items: center;
  background: #fff5f5;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: .85rem 1rem;
}
.report-emergency-icon { font-size: 1.6rem; flex-shrink: 0; }
.report-emergency-text { display: flex; flex-direction: column; gap: .4rem; }
.report-emergency-text strong { font-size: .88rem; color: #991b1b; }

.btn-emergency {
  display: inline-block;
  background: #dc2626;
  color: #fff;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 600;
  padding: .38rem .85rem;
  border-radius: 4px;
  width: fit-content;
  transition: background .15s;
}
.btn-emergency:hover { background: #b91c1c; }

.report-section-label {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-secondary);
}

.report-options { display: flex; flex-direction: column; gap: .65rem; }

.report-option {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.report-option-header { display: flex; align-items: center; gap: .45rem; }
.report-option-icon { font-size: 1.1rem; }
.report-option-title { font-size: .9rem; font-weight: 600; color: var(--text); }
.report-option-desc { font-size: .78rem; color: var(--text-secondary); line-height: 1.5; }

.report-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .5rem; margin-top: .2rem; }
.report-links .btn-link { text-align: center; white-space: normal; }

.btn-link {
  display: inline-block;
  text-decoration: none;
  font-size: .78rem;
  font-weight: 600;
  padding: .35rem .8rem;
  border-radius: 4px;
  border: 1.5px solid var(--border);
  color: var(--text-secondary);
  background: var(--bg-alt);
  transition: border-color .15s, color .15s;
  white-space: nowrap;
}
.btn-link:hover { border-color: var(--green); color: var(--green); }
.btn-link-primary { background: var(--green); color: #fff; border-color: var(--green); }
.btn-link-primary:hover { background: var(--green-hover); border-color: var(--green-hover); color: #fff; }


.report-note { font-size: .72rem; color: var(--muted); }

/* ── Dog run popup ───────────────────────────────────────────── */
.dog-run-popup { padding: .1rem 0; }
.dog-run-popup-type { font-size: .7rem; font-weight: 600; color: #005f69; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .2rem; }
.dog-run-popup-name { font-size: .92rem; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: .25rem; }
.dog-run-popup-meta { font-size: .76rem; color: var(--text-secondary); margin-bottom: .1rem; }
/* ── Animal incident popup list ─────────────────────────────── */
.animal-popup-list {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  max-height: 180px;
  overflow-y: auto;
}
.animal-popup-row {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  padding: .2rem 0;
  border-bottom: 1px solid var(--border);
}
.animal-popup-row:last-child { border-bottom: none; }
.animal-popup-species { font-size: .78rem; font-weight: 500; color: var(--text); flex: 1; min-width: 0; }
.animal-popup-date    { font-size: .7rem; color: var(--text-secondary); white-space: nowrap; }
.animal-popup-overflow { font-size: .72rem; color: var(--text-secondary); margin-top: .35rem; font-style: italic; }

.dog-run-popup-links {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  margin-top: .5rem;
}
.dog-run-directions-link {
  font-size: .76rem;
  font-weight: 600;
  color: #0096a0;
  text-decoration: none;
}
.dog-run-directions-link:hover { text-decoration: underline; }

.park-map-label {
  color: #1a4d2a;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 700;
  background: transparent;
  padding: .22rem .55rem;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(255,255,255,.9), 0 -1px 2px rgba(255,255,255,.9),
               1px 0 2px rgba(255,255,255,.9), -1px 0 2px rgba(255,255,255,.9);
}

.modal-box-sm { max-width: 400px; }
.modal-park-name {
  font-size: .78rem;
  color: var(--text-secondary);
  margin-top: .15rem;
  font-style: italic;
}
.btn-link-danger { border-color: #fecaca; color: #dc2626; background: #fff5f5; }
.btn-link-danger:hover { border-color: #dc2626; color: #b91c1c; background: #fff5f5; }

.report-app-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  background: var(--bg-alt);
  border-radius: 8px;
  padding: .75rem 1rem;
  flex-wrap: wrap;
}
.report-app-text { font-size: .82rem; color: var(--text-secondary); }
.report-app-text strong { color: var(--text); }
.report-app-links { display: flex; gap: .45rem; }

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── Active filter bar ───────────────────────────────────────── */
.active-filters {
  background: var(--green-light);
  border-bottom: 1px solid #c5d9c7;
  padding: .4rem 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  flex-shrink: 0;
  font-size: .75rem;
  color: var(--green-hover);
}
.filter-chip {
  background: #fff;
  border: 1px solid #c5d9c7;
  border-radius: 99px;
  padding: .18rem .65rem;
  font-weight: 600;
  white-space: nowrap;
}
.active-filters-label {
  font-weight: 600;
  color: var(--text-secondary);
  margin-right: .2rem;
}

/* ── Mobile view tabs (hidden on desktop/tablet) ─────────────── */
.view-tabs { display: none; }

/* ── Tablet (≤ 1024px) ───────────────────────────────────────── */
@media (max-width: 1024px) {
  main { grid-template-columns: 1fr 300px; }
}

/* ── Mobile (≤ 700px) ────────────────────────────────────────── */
@media (max-width: 700px) {

  /* Header: compact */
  header {
    padding: .7rem 1rem;
    flex-wrap: wrap;
    gap: .4rem;
    min-height: unset;
  }
  .logo-tag { display: none; }
  .stats { gap: .6rem; flex-wrap: wrap; }
  .stat { font-size: .72rem; }

  /* Report a Dog button: top of controls on mobile */
  .mobile-report-bar {
    display: block;
    padding: .6rem 1rem .3rem;
  }
  .btn.mobile-report-btn {
    width: 100%;
    padding: .5rem 1rem;
    font-size: .84rem;
    border-radius: 6px;
    border: none;
    margin-left: 0;
    text-align: center;
    justify-content: center;
  }

  /* Data mode bar: compact on mobile */
  .data-mode-bar {
    padding: .25rem 1rem;
  }
  .data-mode-bar .control-group { width: 100%; }
  .data-mode-bar label { font-size: .72rem; }
  .data-mode-bar select { min-width: 0; flex: 1; font-size: .78rem; padding: .3rem .45rem; }

  /* Controls: show compact bar (Filters toggle only) */
  .mobile-bar {
    display: flex;
    padding: .3rem 1rem .35rem;
  }

  .filter-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: .5rem .85rem;
    font-family: inherit;
    font-size: .84rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: border-color .15s;
  }
  .filter-toggle-btn:hover { border-color: var(--green); }
  .filter-toggle-btn.open { border-color: var(--green); color: var(--green); }

  .filter-active-dot {
    display: none;
    width: 7px;
    height: 7px;
    background: var(--orange);
    border-radius: 50%;
    margin-left: .25rem;
  }
  .filter-active-dot.visible { display: block; }

  /* Filter panel: hidden by default, slides open */
  .filter-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .22s ease;
  }
  /* Dog run / animal panels: collapsed grid in mobile (same behaviour as complaints panel) */
  #controls[data-mode="dogruns"] #dogrun-filter-panel  { display: grid; }
  #controls[data-mode="dogruns"] #filter-panel         { display: none; }
  #controls[data-mode="animals"] #animal-filter-panel  { display: grid; }
  #controls[data-mode="animals"] #filter-panel         { display: none; }
  .filter-panel.open {
    grid-template-rows: 1fr;
    border-bottom: 1px solid var(--border);
  }
  .filter-panel-inner {
    overflow: hidden;
    padding: 0 .75rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
  }
  .filter-panel.open .filter-panel-inner {
    padding: .5rem .75rem .65rem;
  }
  .control-group { width: 100%; gap: .15rem; }
  label { font-size: .62rem; }
  select, .zip-autocomplete-input { min-width: 0; width: 100%; font-size: .75rem; padding: .3rem .45rem; }
  .btn { width: 100%; padding: .4rem .5rem; font-size: .75rem; align-self: auto; }
  .desktop-report-btn { display: none; }

  /* View tab bar */
  .view-tabs {
    display: flex;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .view-tab {
    flex: 1;
    padding: .6rem 1rem;
    border: none;
    background: none;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
  }
  .view-tab.active { color: var(--green); border-bottom-color: var(--green); }
  .tab-count {
    display: inline-block;
    background: var(--green);
    color: #fff;
    font-size: .65rem;
    border-radius: 99px;
    padding: .05rem .4rem;
    margin-left: .3rem;
    vertical-align: middle;
    font-weight: 600;
  }
  .view-tab:not(.active) .tab-count { background: var(--muted); }

  /* Main: full-area switching between map and list */
  main {
    display: block;
    position: relative;
    flex: 1;
    min-height: 0;
  }
  #map-container,
  #list-panel {
    position: absolute;
    inset: 0;
    height: 100%;
    border: none;
  }
  #list-panel {
    visibility: hidden;
    pointer-events: none;
    z-index: 0;
  }
  #list-panel.mobile-active {
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
  }
  #map-container.mobile-hidden {
    visibility: hidden;
    pointer-events: none;
  }

  /* "Report here" button: lift above bottom safe area */
  .map-report-btn { bottom: 1.25rem; font-size: .82rem; padding: .6rem 1.3rem; }

  /* Modal: full-screen slide-in from right (METBird style) */
  .modal-overlay {
    display: flex;
    padding: 0;
    align-items: stretch;
    justify-content: flex-end;
    background: rgba(0,0,0,0);
    pointer-events: none;
    transition: background .25s ease;
  }
  .modal-overlay.open {
    background: rgba(0,0,0,.25);
    pointer-events: auto;
  }
  .modal-box {
    transform: translateX(100%);
    transition: transform .25s ease;
    max-width: 100%;
    width: 100%;
    border-radius: 0;
    max-height: 100vh;
    max-height: 100dvh;
    height: 100%;
    box-shadow: none;
  }
  .modal-overlay.open .modal-box {
    transform: translateX(0);
  }
  /* ← Back button replaces ✕ close on mobile */
  .modal-header {
    justify-content: flex-start;
    gap: .85rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--border);
  }
  .modal-close {
    order: -1;
    font-size: 0;
    padding: 0;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .modal-close::before {
    content: '← Back';
    font-size: .84rem;
    font-weight: 600;
    color: var(--orange);
    white-space: nowrap;
  }
  .modal-close:hover::before { text-decoration: underline; }
  .modal-title { font-size: .95rem; }

  /* Footer: hide on mobile to reclaim space */
  footer { display: none; }
}

/* ── Toast notifications ──────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: 380px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .85rem;
  border-radius: 8px;
  font-size: .8rem;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s, transform .3s;
  pointer-events: auto;
}
.toast-enter { opacity: 1; transform: translateY(0); }
.toast-exit { opacity: 0; transform: translateY(10px); }
.toast-error { background: #991b1b; }
.toast-info { background: #1e3a5f; }
.toast-success { background: #166534; }
.toast-message { flex: 1; }
.toast-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 .1rem;
  line-height: 1;
}
.toast-close:hover { color: #fff; }

/* ── Screen reader only ──────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0s !important; animation-duration: 0s !important; }
  .app-loading-spinner { animation: none; border-top-color: #fff; }
  .toast { transition: none; }
  .toast-enter { transform: none; }
  #detail-panel { transition: none; }
}

/* ── Small mobile (≤ 400px) ──────────────────────────────────── */
@media (max-width: 400px) {
  .logo-off, .logo-leash { font-size: 1.25rem; }
  .stats { display: none; }
  #controls { gap: .38rem; }
  select { font-size: .72rem; padding: .3rem .4rem; }
  .btn { font-size: .72rem; }
}