/* Map tools (spec 014) — Layers button + Map layers panel, measuring tape */

/* ── Layers button + popover ────────────────────────────────────────────── */
.map-layers {
  position: relative;
  display: flex;          /* the button stretches to the cluster width like the other FABs */
  flex-direction: column;
  pointer-events: none;   /* the cluster is click-through; button + panel opt back in */
}
.map-layers:has(> .map-fab--layers[style*="none"]) { display: none; }
.map-fab--layers .map-fab__icon,
.map-fab--measure .map-fab__icon { color: var(--color-primary-solid); }

.map-layers__panel {
  pointer-events: auto;
  position: absolute;
  top: 0;
  inset-inline-start: calc(100% + var(--space-2));
  min-width: 240px;
  max-width: min(320px, calc(100vw - 96px));
  padding: var(--space-2) 0;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-ink-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 210;
}
.map-layers__panel[hidden] { display: none; }
.map-layers__title {
  padding: var(--space-1) var(--space-4) var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.map-layers__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.map-layers__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
}
.map-layers__row:hover { background: var(--color-surface-sunken); }
.map-layers__icon {
  width: 20px;
  text-align: center;
  color: var(--color-primary-solid);
  flex-shrink: 0;
}
.map-layers__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.map-layers__name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-strong);
}
.map-layers__subtitle {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  white-space: normal;
}

/* Switch: track + knob, knob slides to the end side when on (mirrors in RTL) */
.map-layers__switch {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--color-ink-subtle);
  border: none;
  cursor: pointer;
  transition: background-color var(--duration-fast);
}
.map-layers__switch::after {
  content: "";
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-sm);
  transition: inset-inline-start var(--duration-fast);
}
.map-layers__switch.is-on { background: var(--color-primary); }
.map-layers__switch.is-on::after { inset-inline-start: 18px; }
.map-layers__switch:focus-visible {
  outline: 2px solid var(--color-primary-focus);
  outline-offset: 2px;
}

/* ── Measure button: active while measuring ─────────────────────────────── */
.map-fab--measure.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-ink-strong);
}
.map-fab--measure.is-active .map-fab__icon { color: var(--color-ink-strong); }
.map-fab--measure.is-active:hover,
.map-fab--measure.is-active:focus-visible { background: var(--color-primary-hover); }

/* ── Measuring tape pins (44 px hit area, small visual) ─────────────────── */
.measure-pin {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}
.measure-pin:active { cursor: grabbing; }
.measure-pin__dot {
  display: block;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(44, 74, 110, 0.35);
}
.measure-pin--start .measure-pin__dot {
  width: 14px;
  height: 14px;
  background: var(--color-surface-raised);
  border: 3px solid var(--color-ink-strong);
}
.measure-pin--end .measure-pin__dot {
  width: 18px;
  height: 18px;
  background: var(--color-ink-strong);
  border: 3px solid var(--color-surface-raised);
}

/* ── Measurement chip by the end pin ────────────────────────────────────── */
.measure-chip {
  position: absolute;
  z-index: 190;            /* above the map, below the FAB cluster / panels */
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding-block: var(--space-2);
  padding-inline-start: var(--space-3);
  padding-inline-end: var(--space-2);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--color-ink-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  color: var(--color-ink-strong);
  pointer-events: auto;
  max-width: 240px;
}
.measure-chip__body { display: flex; flex-direction: column; gap: 2px; }
.measure-chip__distance {
  font-size: var(--text-base);
  font-weight: 600;
  white-space: nowrap;
  unicode-bidi: plaintext;
  font-variant-numeric: tabular-nums;
}
.measure-chip__bearing {
  font-size: var(--text-sm);
  color: var(--color-ink-base);
  direction: ltr;            /* 047°T stays left-to-right */
  text-align: start;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}
[dir="rtl"] .measure-chip__bearing { text-align: right; }
.measure-chip__hint {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  white-space: normal;
}
.measure-chip__close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-ink-muted);
  cursor: pointer;
}
.measure-chip__close:hover,
.measure-chip__close:focus-visible {
  background: var(--color-surface-sunken);
  color: var(--color-ink-strong);
}