/* The embeddable map widget (/embed/map). Hand-written and small: it loads on
   other people's sites, so it skips the full site stylesheet. */

:root {
  --accent: #0080ff;
  --banner-bg: rgba(255, 255, 255, 0.94);
  --banner-fg: #111827;
  --banner-muted: #6b7280;
  --banner-border: #e5e7eb;
  --cta-bg: #f3f4f6;
}
.theme-dark {
  --banner-bg: rgba(17, 24, 39, 0.94);
  --banner-fg: #f9fafb;
  --banner-muted: #9ca3af;
  --banner-border: #374151;
  --cta-bg: #1f2937;
}
@media (prefers-color-scheme: dark) {
  .theme-auto {
    --banner-bg: rgba(17, 24, 39, 0.94);
    --banner-fg: #f9fafb;
    --banner-muted: #9ca3af;
    --banner-border: #374151;
    --cta-bg: #1f2937;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font: 12px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #e5e7eb;
}
body.banner-top { flex-direction: column-reverse; }

#map { flex: 1 1 auto; min-height: 0; }

.banner {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 5px 8px;
  color: var(--banner-fg);
  background: var(--banner-bg);
  border-top: 1px solid var(--banner-border);
  white-space: nowrap;
}
.banner-top .banner { border-top: 0; border-bottom: 1px solid var(--banner-border); }

.banner a { color: inherit; text-decoration: none; }
.brand { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; letter-spacing: -0.01em; }
.brand img { display: block; }

.count { display: inline-flex; align-items: center; gap: 5px; color: var(--banner-muted); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); animation: pulse 2s infinite; }
.stale .dot { background: #9ca3af; animation: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }

.ctas { margin-left: auto; display: inline-flex; gap: 6px; }
.cta {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--cta-bg);
  font-weight: 600;
  font-size: 11px;
  transition: background 0.15s, color 0.15s;
}
.cta:hover, .cta:focus-visible { background: var(--accent); color: #fff; }
.cta-feed { color: var(--accent); }

/* Compact: logo, count and one CTA. Forced by ?compact=1, automatic when narrow. */
.compact .brand-name, .compact .cta-feed { display: none; }
@media (max-width: 360px) {
  .brand-name, .cta-feed { display: none; }
}
@media (max-width: 220px) {
  .count { display: none; }
}

/* Hover card */
.maplibregl-popup-content { padding: 6px 9px; font: 12px/1.35 system-ui, sans-serif; color: #111827; }
.ac-card strong { display: block; font-size: 13px; }
.ac-card span { color: #4b5563; }
.maplibregl-ctrl-attrib { font-size: 10px; }