/*
 * The map on the public /rocks page: stage, frame and controls.
 * The marker layer and the rock card come from rox-marker-layer.css / rox-rock-card.css (brand purple by default).
 * Behaviour: assets/js/rocks-map.js. Markup: server/lib/rocks-map-block.ts.
 *
 * Layout rule: nothing here may change size after first paint. The map has a fixed height.
 * Fullscreen rule: .rm-wrap, .rm-frame and .rm-shell must never get transform / filter / contain / backdrop-filter
 * (or a z-index), otherwise the position:fixed fullscreen shell is trapped inside them.
 */

/* ── Stage ───────────────────────────────────────────────────────────────── */
.rm-stage { max-width: 1160px; margin: 0 auto; padding: 24px 16px 0; box-sizing: border-box; }
.rm-wrap { position: relative; }
.rm-frame {
  position: relative;
  border: 1.5px solid #d9cdf0;
  border-radius: 20px;
  background: #ece6f7;
  box-shadow: 0 8px 28px rgba(76, 29, 149, 0.1);
}
.rm-shell { position: relative; border-radius: inherit; }
.rm-map {
  position: relative;
  width: 100%;
  height: clamp(380px, 62vh, 640px);
  height: clamp(380px, 62svh, 640px);
  border-radius: inherit;
  overflow: hidden;
  background: #ece6f7;
}
.rm-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Loading / error / empty message: a pill over the map; it never blocks dragging the map. */
.rm-msg {
  position: absolute; inset: 0; z-index: 3; margin: 0; padding: 24px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  pointer-events: none;
}
.rm-msg[hidden] { display: none; }
.rm-msg > span {
  max-width: min(100%, 420px); padding: 10px 18px; border-radius: 18px;
  background: #fff; border: 1.5px solid #d9cdf0; color: #3b2a57;
  font-weight: 600; font-size: 0.95rem; line-height: 1.4;
  box-shadow: 0 2px 10px rgba(76, 29, 149, 0.16);
}

/* ── Controls inside the map ─────────────────────────────────────────────── */
.rm-total {
  position: absolute; z-index: 5; top: 10px; left: 10px; max-width: calc(100% - 76px); margin: 0;
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; box-sizing: border-box;
  border-radius: 999px; background: #fff; color: #3b2a57; border: 1.5px solid #d9cdf0;
  font-weight: 700; font-size: 0.92rem; line-height: 1.25; font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 10px rgba(76, 29, 149, 0.16);
  pointer-events: none;
}
.rm-total[hidden] { display: none; }
/* Group picker (campaign pages): under the count pill, so it never moves the map. */
.rm-groups { position: absolute; z-index: 5; top: 62px; left: 10px; max-width: calc(100% - 76px); }
.rm-groups[hidden] { display: none; }
.rm-group-select {
  display: block; max-width: 100%; min-height: 44px; padding: 8px 36px 8px 16px; box-sizing: border-box;
  border-radius: 999px; border: 1.5px solid #4529B8; color: #35208F; font: inherit; font-weight: 700; font-size: 0.92rem;
  line-height: 1.2; cursor: pointer; box-shadow: 0 2px 10px rgba(76, 29, 149, 0.2);
  -webkit-appearance: none; appearance: none; text-overflow: ellipsis;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234c1d95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px;
}
.rm-group-select:focus-visible { outline: 3px solid #35208F; outline-offset: 2px; box-shadow: 0 0 0 5px #fff; }
.rm-fs {
  position: absolute; z-index: 6; top: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; box-sizing: border-box;
  border-radius: 999px; border: 1.5px solid #4529B8; background: #fff; color: #35208F;
  font: inherit; font-weight: 700; font-size: 0.92rem; line-height: 1.2; cursor: pointer;
  box-shadow: 0 2px 10px rgba(76, 29, 149, 0.2);
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.15s ease;
}
.rm-fs:hover { background: #f3eeff; }
.rm-fs:active { transform: scale(0.97); }
.rm-fs:focus-visible { outline: 3px solid #35208F; outline-offset: 2px; box-shadow: 0 0 0 5px #fff; }
.rm-map .mapboxgl-ctrl-top-right { margin-top: 58px; }
.rm-map .mapboxgl-ctrl-group button { width: 44px; height: 44px; }

@media (max-width: 520px) {
  .rm-fs { width: 44px; padding: 0; justify-content: center; }
  .rm-fs-t { display: none; }
  .rm-total { font-size: 0.85rem; padding: 8px 12px; }
  .rm-map .mapboxgl-ctrl-group button { width: 40px; height: 40px; }
  .rm-shell.rm-full .rm-fs { width: auto; padding: 8px 14px; }
  .rm-shell.rm-full .rm-fs-t { display: inline; }
}
@media (max-width: 360px) {
  .rm-shell.rm-full .rm-fs { width: 44px; padding: 0; }
  .rm-shell.rm-full .rm-fs-t { display: none; }
}

/* ── Fullscreen (a fixed dialog: works on iOS, honours Back and Esc) ──────── */
.rm-shell.rm-full { position: fixed; inset: 0; z-index: 2000; border-radius: 0; animation: rm-full-in 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
.rm-shell.rm-full .rm-map { height: 100vh; height: 100dvh; border-radius: 0; }
.rm-shell.rm-full .rm-total { left: max(10px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top)); }
.rm-shell.rm-full .rm-groups { left: max(10px, env(safe-area-inset-left)); top: calc(62px + env(safe-area-inset-top)); }
.rm-shell.rm-full .rm-fs {
  right: max(10px, env(safe-area-inset-right)); top: max(10px, env(safe-area-inset-top));
  background: #35208F; color: #fff; border-color: #fff;
}
.rm-shell.rm-full .rm-fs:hover { background: #5b21b6; }
.rm-shell.rm-full .mapboxgl-ctrl-top-right { margin-top: calc(58px + env(safe-area-inset-top)); }
@keyframes rm-full-in { from { opacity: 0.4; transform: scale(0.97); } to { opacity: 1; transform: none; } }
html.rm-lock, html.rm-lock body { overflow: hidden; overscroll-behavior: none; }

/* ── Note under the map ──────────────────────────────────────────────────── */
.rm-note {
  margin: 0; padding: 12px 0 20px; min-height: 44px; box-sizing: border-box;
  display: flex; align-items: center;
  font-size: 0.85rem; line-height: 1.45; color: var(--rx-text-2, var(--granit, #5A5360)); overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .rm-shell.rm-full { animation: none; }
  .rm-fs { transition: none; }
}

/* ── Marker contrast on the website map (WCAG 1.4.11, non-text >= 3:1) ──────
   The shared marker layer (also embedded in the app) draws an ink edge and an ochre
   focus/selection ring. On the light paper map ochre is only 1.7:1, so the website
   uses ink for keyboard focus and ultramarine for the selected pebble (both >= 7:1 on
   land, water and park). On the dark map the ink edge vanishes (1.1:1), so the edge is
   paper-coloured there and the ochre rings (7.6:1) stay. */
.rm-map .rml-layer { --rml-focus: #1f1b24; --rml-select: #4529b8; }

/* ── Dark theme (footer switch sets html.rx-dark; html.rx-light opts a page out) ─
   Same surfaces and ink as the app's dark tokens; the map style itself is repainted
   by mapbox-helper.js (roxPaper). Marker pebbles keep their cream/pigment fills
   (the emblem); only their outline flips so it stays visible on the dark map. */
@media screen {
  html.rx-dark:not(.rx-light) .rm-frame{ border-color: #4A4253; background: #26212C; box-shadow: none; }
  html.rx-dark:not(.rx-light) .rm-map{ background: #26212C; }
  html.rx-dark:not(.rx-light) .rm-map .rml-layer{ --rml-edge: #F4EFE6; --rml-focus: #E9A92A; --rml-select: #E9A92A; }
  html.rx-dark:not(.rx-light) .rm-msg > span,
  html.rx-dark:not(.rx-light) .rm-total{ background: #2C2732; border-color: #857D90; color: #F4EFE6; box-shadow: none; }
  html.rx-dark:not(.rx-light) .rm-group-select,
  html.rx-dark:not(.rx-light) .rm-fs{
    background-color: #2C2732; color: #E4DEF6; border-color: #B4A6F2; box-shadow: none;
  }
  html.rx-dark:not(.rx-light) .rm-group-select{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23E4DEF6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  html.rx-dark:not(.rx-light) .rm-fs:hover{ background: #36303D; }
  html.rx-dark:not(.rx-light) .rm-group-select:focus-visible,
  html.rx-dark:not(.rx-light) .rm-fs:focus-visible{ outline-color: #B4A6F2; box-shadow: 0 0 0 5px #1F1B24; }
  html.rx-dark:not(.rx-light) .rm-shell.rm-full .rm-fs{ background: #4529B8; color: #fff; border-color: #fff; }
  html.rx-dark:not(.rx-light) .rm-shell.rm-full .rm-fs:hover{ background: #35208F; }
  html.rx-dark:not(.rx-light) .rm-map .mapboxgl-ctrl-group{ background: #2C2732; box-shadow: none; border: 1.5px solid #857D90; }
  html.rx-dark:not(.rx-light) .rm-map .mapboxgl-ctrl-group button + button{ border-top-color: #4A4253; }
  html.rx-dark:not(.rx-light) .rm-map .mapboxgl-ctrl-group button .mapboxgl-ctrl-icon{ filter: invert(1); }
  html.rx-dark:not(.rx-light) .rm-map .mapboxgl-ctrl-attrib{ background: rgba(31, 27, 36, 0.8); color: #B9B1C2; }
  html.rx-dark:not(.rx-light) .rm-map .mapboxgl-ctrl-attrib a{ color: #E4DEF6; }
  html.rx-dark:not(.rx-light) .rm-map .mapboxgl-ctrl-logo{ filter: invert(1) hue-rotate(180deg); }
  /* The rock card opens over the map (and as a sheet in fullscreen). */
  html.rx-dark:not(.rx-light) .rrc,
  html.rx-dark:not(.rx-light) .rrc-sheet{
    --rrc-bg: #2C2732;
    --rrc-fg: #F4EFE6;
    --rrc-muted: #B9B1C2;
    --rrc-accent: #4529B8;
    --rrc-accent-fg: #fff;
    --rrc-soft: #36303D;
    --rrc-line: rgba(244, 239, 230, 0.28);
    --rrc-focus: #B4A6F2;
    --rrc-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  }
}