/* Map annotations (spec 016) — PRO badge + locked switch in the Layers panel,
   annotations stack (bar / draw toolbar / erase toolbar), draw mode */

/* ── Layers panel: PRO badge, locked switch ─────────────────────────────── */
.map-layers__pro {
  display: inline-block;
  margin-inline-start: var(--space-2);
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-solid) 100%);
  color: var(--color-on-primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.map-layers__switch.is-locked {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline-end: 6px;
  color: var(--color-ink-muted);
  font-size: 9px;
}
.map-layers__switch.is-locked::after { inset-inline-start: 2px; }

/* ── Stack: above the markers bar, or above .map-action-bar ─────────────── */
.annotations-stack {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* .map-action-bar height + gap; annotations.js adds the markers bar when it shows */
  bottom: calc(var(--space-5) + 52px + var(--markers-bar-space, 0px));
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: max-content;
  max-width: calc(100vw - var(--space-8));
  pointer-events: none;
}
.annotations-stack[hidden],
.annotations-stack [hidden] { display: none !important; }
.annotations-stack > * { pointer-events: auto; }

/* The marker selection card / Undo always sit above the topmost bar: the
   markers bar keeps its place and leaves room for the annotations stack. */
#markers-bar { margin-top: var(--annotations-stack-space, 0px); }

/* ── Draw toolbar ───────────────────────────────────────────────────────── */
.annotations-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}
.annotations-toolbar__hint {
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(20, 58, 94, 0.78);
  color: #FFFFFF;
  font-size: var(--text-xs);
  white-space: nowrap;
}
.annotations-toolbar__row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--color-ink-subtle);
  box-shadow: var(--shadow-md);
}
.annotations-swatches {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-inline: var(--space-1);
  margin-inline-end: var(--space-1);
  border-inline-end: 1px solid var(--color-ink-subtle);
}
.annotations-swatch {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(44, 74, 110, 0.25);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-default);
}
.annotations-swatch.is-selected {
  transform: scale(1.12);
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--color-ink-strong);
  border-color: rgba(44, 74, 110, 0.45);
}
.annotations-swatch:focus-visible { outline: 2px solid var(--color-primary-focus); outline-offset: 3px; }
.markers-bar__btn:disabled,
.markers-bar__btn[aria-disabled="true"] { color: var(--color-ink-muted); cursor: default; background: transparent; }

/* ── Draw / erase modes: bottom bars and FAB columns step aside ─────────── */
#map-container.annotations-busy .map-action-bar,
#map-container.annotations-drawing .map-fab-cluster,
#map-container.annotations-drawing .map-end-cluster,
#map-container.annotations-drawing .mapboxgl-ctrl-bottom-right {
  visibility: hidden;
  pointer-events: none;
}
#map-container.annotations-drawing .mapboxgl-canvas { touch-action: none; }

@media (max-width: 480px) {
  .annotations-stack .markers-bar .markers-bar__btn > i { display: none; }
  .annotations-swatch { width: 20px; height: 20px; }
  .annotations-swatches { gap: 3px; }
  .annotations-toolbar__row .markers-bar__btn > i { display: none; }
  .annotations-toolbar__hint { white-space: normal; text-align: center; }
}