/* The test-site map (public/js/sitemap.mjs, Leaflet): landing page and Plattform → Provplatser.
   Loaded after /vendor/leaflet/leaflet.css. */
:root {
  --amber: #b86e00;
  --amber-soft: #fdf1dc;
  --sea: #e8f0f2;
  --me: #2c64a8;
  --tile-filter: none;
  --map-bg: #aad3df; /* OSM's sea: shows between tiles while they load */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --amber: #f0a73a;
    --amber-soft: #3a2a10;
    --sea: #0f1a1c;
    --me: #7fb1ee;
    --tile-filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.55);
    --map-bg: #33474d;
  }
}
:root[data-theme="dark"] {
  --amber: #f0a73a;
  --amber-soft: #3a2a10;
  --sea: #0f1a1c;
  --me: #7fb1ee;
  --tile-filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.55);
  --map-bg: #33474d;
}

.sitemap { position: relative; font: inherit; z-index: 0; }
.sitemap.leaflet-container { background: var(--map-bg); }
/* Light OSM tiles turned dark in dark mode. Per tile, not on the pane: a filtered pane shows hairlines at tile edges. */
.sitemap .leaflet-tile { filter: var(--tile-filter); }
.sitemap.no-tiles.leaflet-container { background: var(--sea); }
.sitemap.can-pick { cursor: crosshair; }
.sitemap.can-pick .leaflet-grab { cursor: crosshair; }
.sitemap.leaflet-container { font: inherit; }
.sitemap a { color: var(--brand); }

/* Controls in the app's colours. */
.sitemap .leaflet-bar { border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-1); overflow: hidden; }
.sitemap .leaflet-bar a {
  width: 40px; height: 40px; line-height: 40px; background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line);
  font: 700 20px/40px var(--font);
}
.sitemap .leaflet-bar a:last-child { border-bottom: 0; }
.sitemap .leaflet-bar a.leaflet-disabled { color: var(--muted); background: var(--surface-2); }
@media (hover: hover) { .sitemap .leaflet-bar a:hover { background: var(--surface-2); } }
.sitemap .leaflet-bar a:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.sitemap .leaflet-control-attribution { background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--ink-2); font-size: 11px; padding: 1px 6px; }
.sitemap .leaflet-control-attribution a { color: var(--ink-2); }

/* Sites: brand colour, hästdjur amber, both: half and half. */
.site-pin span {
  display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--brand); border: 3px solid var(--surface);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.35); transition: transform 0.15s, border-color 0.15s;
}
.site-pin.c1 span { background: var(--amber); }
.site-pin.cboth span { background: conic-gradient(var(--brand) 0 50%, var(--amber) 0); }
.site-pin.is-selected span { transform: scale(1.4); border-color: var(--ink); }
.site-pin.is-draft span { opacity: 0.55; border-style: dashed; border-color: var(--ink-2); }
.site-pin:focus-visible { outline: none; }
.site-pin:focus-visible span { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--brand); }
@media (hover: hover) { .site-pin:hover span { transform: scale(1.25); } }

/* You are here */
.me-pin span {
  display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--me); border: 3px solid #fff;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--me) 50%, transparent); animation: me-pulse 2s ease-out infinite;
}
@keyframes me-pulse { to { box-shadow: 0 0 0 16px color-mix(in srgb, var(--me) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .me-pin span { animation: none; } }
.me-accuracy { fill: var(--me); fill-opacity: 0.1; stroke: var(--me); stroke-opacity: 0.45; stroke-width: 1.5; }

/* Plattform → Provplatser: where the site being edited goes */
.pick-pin span { display: block; width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--bad); background: color-mix(in srgb, var(--bad) 18%, transparent); }

/* Touch: "two fingers" hint after a one-finger drag */
.sitemap-hint {
  position: absolute; inset: 0; z-index: 1000; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity 0.2s;
  background: rgb(0 0 0 / 0.45); color: #fff; font-weight: 650; text-align: center; padding: 16px;
}
.sitemap.show-hint .sitemap-hint { opacity: 1; }

/* Plattform → Provplatser */
.sites-admin { align-items: start; }
.sitemap-host { height: min(75vh, 680px); min-height: 420px; border-radius: var(--r-md); overflow: hidden; }
.site-row { text-align: left; cursor: pointer; font: inherit; color: inherit; width: 100%; }