/*
 * RoxGeo rock marker layer (rml-*): photo pebbles, count groups, selection ring.
 * Source of truth for BOTH the website (linked from the Kamyki Dobra page) and the app's map WebView
 * (embedded by scripts/build-rock-map-js.ts into client/lib/generated/rock-map-layer.ts).
 *
 * Theme hooks (override on .rml-layer itself with a more specific selector, e.g. `.my-page .rml-layer`):
 *   --rml-single-bg   default pebble colour of a single rock without its own colour
 *   --rml-group-bg    group pebble colour        --rml-group-fg   group count colour
 *   --rml-edge        pebble outline             --rml-focus      keyboard focus ring
 *   --rml-select      selection ring colour
 * Transforms live on .rml-shape only: the marker button itself is positioned by Mapbox.
 */
.rml-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Board colours: pigment pebble with a 2 px ink outline; the group is a paper pebble with a thick outline. */
  --rml-single-bg: #7355d0;
  --rml-group-bg: #fbf8f2;
  --rml-group-fg: #1f1b24;
  --rml-edge: #1f1b24;
  --rml-focus: #e9a92a;
  --rml-select: #e9a92a;
  --rml-badge-bg: #fbf8f2;
  --rml-badge-fg: #1f1b24;
}
.rml-layer[data-inert] .rml-marker { pointer-events: none; }

.rml-marker {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.rml-shape {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 33px;
  overflow: hidden;
  border-radius: 58% 42% 55% 42% / 58% 42% 55% 42%;
  border: 2px solid var(--rml-edge);
  background: var(--rml-fill, var(--rml-single-bg));
  color: var(--rml-ink, #fbf8f2);
  transition: transform 0.16s ease, opacity 0.2s ease;
}
.rml-group .rml-shape {
  width: 44px;
  height: 40px;
  background: var(--rml-group-bg);
  color: var(--rml-group-fg);
  border-width: 3px;
}

.rml-content {
  position: relative;
  display: grid;
  place-items: center;
  font: 400 18px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: inherit;
  pointer-events: none;
}
.rml-content svg { width: 18px; height: 18px; display: block; }
.rml-group .rml-content { font: 600 16px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0; }

.rml-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.25s ease;
  -webkit-user-drag: none;
  pointer-events: none;
}
.rml-has-photo .rml-thumb { opacity: 1; }
.rml-has-photo .rml-content { visibility: hidden; }

/* Corner badge: the count of a group moves here once the photo is showing. A single rock's photo carries no icon:
   the glyph (compass, ...) is only shown while there is no photo. */
.rml-badge {
  position: absolute;
  right: 0;
  bottom: 2px;
  min-width: 20px;
  height: 20px;
  padding: 0 3px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1.5px solid var(--rml-edge);
  background: var(--rml-badge-bg);
  color: var(--rml-badge-fg);
  font: 600 11px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.rml-badge svg { width: 12px; height: 12px; display: block; stroke: var(--rml-badge-fg); }
.rml-group .rml-badge { right: -2px; bottom: 0; }
.rml-marker:not(.rml-group) .rml-badge { display: none; }
.rml-has-photo .rml-badge { opacity: 1; transform: none; }

/* Status (app): same meanings as before the pebble redesign. */
.rml-marker[data-status="at_risk"] .rml-shape { border-color: #8a5a00; }
.rml-marker[data-status="missing"] .rml-shape { border-color: #b3261e; opacity: 0.7; }
.rml-marker[data-unverified] .rml-shape { border-color: #6b6571; opacity: 0.6; }

/* Hover / keyboard focus / selection act on the shape only. */
@media (hover: hover) {
  .rml-marker:hover .rml-shape { transform: scale(1.08); }
}
.rml-marker:focus-visible .rml-shape {
  transform: scale(1.1);
  box-shadow: 0 0 0 3px #fbf8f2, 0 0 0 6px var(--rml-focus);
}
.rml-marker[data-active] .rml-shape {
  transform: scale(1.33);
  border-width: 1.5px;
  box-shadow: 0 0 0 2px #fbf8f2, 0 0 0 5px var(--rml-select);
}
.rml-marker[data-active]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 33px;
  margin: -16.5px 0 0 -18px;
  border-radius: 58% 42% 55% 42% / 58% 42% 55% 42%;
  border: 2px solid var(--rml-select);
  opacity: 0;
  pointer-events: none;
  animation: rml-wave 0.9s ease-out 1;
}
/* Pulse (app: the rock being looked at). Only transform + opacity, on a pseudo-element. */
.rml-marker[data-pulse]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 33px;
  margin: -16.5px 0 0 -18px;
  border-radius: 58% 42% 55% 42% / 58% 42% 55% 42%;
  background: var(--rml-fill, var(--rml-single-bg));
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  animation: rml-pulse 1.8s ease-out infinite;
}

.rml-enter {
  animation: rml-drop 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
  animation-delay: calc(var(--n, 0) * 22ms);
}
@keyframes rml-drop {
  from { opacity: 0; transform: translateY(-14px) scale(0.6); }
  to { opacity: 1; transform: none; }
}
@keyframes rml-wave {
  from { opacity: 0.7; transform: scale(1); }
  to { opacity: 0; transform: scale(2); }
}
@keyframes rml-pulse {
  from { opacity: 0.5; transform: scale(1); }
  to { opacity: 0; transform: scale(2.2); }
}

@media (prefers-reduced-motion: reduce) {
  .rml-enter, .rml-marker[data-active]::before, .rml-marker[data-pulse]::after { animation: none; }
  .rml-shape, .rml-thumb, .rml-badge { transition: none; }
  .rml-marker:hover .rml-shape, .rml-marker:focus-visible .rml-shape { transform: none; }
}
.rml-layer[data-reduced] .rml-enter,
.rml-layer[data-reduced] .rml-marker[data-active]::before,
.rml-layer[data-reduced] .rml-marker[data-pulse]::after { animation: none; }
.rml-layer[data-reduced] .rml-shape,
.rml-layer[data-reduced] .rml-thumb,
.rml-layer[data-reduced] .rml-badge { transition: none; }
.rml-layer[data-reduced] .rml-marker:hover .rml-shape,
.rml-layer[data-reduced] .rml-marker:focus-visible .rml-shape { transform: none; }

@media (forced-colors: active) {
  .rml-shape { background: Canvas; color: CanvasText; border-color: CanvasText; forced-color-adjust: none; }
  .rml-badge { background: Canvas; color: CanvasText; border-color: CanvasText; forced-color-adjust: none; }
  .rml-badge svg { stroke: CanvasText; }
  .rml-marker:focus-visible .rml-shape, .rml-marker[data-active] .rml-shape { outline: 3px solid Highlight; outline-offset: 2px; }
}