/* ============================================================
   locations.css — Styles for saved location pins, clusters,
   popup card, and edit mode UI.
   ============================================================ */

/* ---- Back to Map button (shown during calculator mode) ----
   This lives inside .map-action-stack, so the stack owns its position. It used
   to be independently fixed at left:14px, which put it underneath the fixed
   left rail on every page that renders one. */
.back-to-map-btn {
  width: 100%;
  padding: 8px 14px;
  background: #1a1a2e;
  color: #f0c830;
  border: 1.5px solid #f0c830;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  transition: background 0.15s, color 0.15s;
}

.back-to-map-btn:hover {
  background: #f0c830;
  color: #1a1a2e;
}

/* map-wrap is a fixed full-screen map shell in the map-first UI. */
.map-wrap {
  position: fixed;
}

/* ============================================================
   Waypoint pin — a bright chip floating above a ground ring.

   The gap between chip and ring is the whole idea: the ring sits on the true
   coordinate, the chip hovers above it, so the marker reads as a HUD waypoint
   rather than the yellow teardrop every other drop site uses.

   The chip is near-white with a royal-blue glyph and a dark hairline rim. The
   rim is doing real work: it is what keeps a light chip from dissolving into
   bright snow and sand tiles. On hover the chip flips to solid blue with a
   white glyph, which is why every colour here is a scoped custom property —
   set --pin-body / --pin-ink once and the tail triangle follows automatically.

   Geometry: chip 20 + tail 5 + gap 3 + ring 10 = 38 tall, 26 wide. The icon
   is anchored at the ring's centre (13, 33), not the box bottom; keep the two
   in sync with iconSize/iconAnchor in js/locations.js.
   ============================================================ */
.loc-pin {
  --pin-body: #f7f8fa;
  --pin-ink: var(--dc-blue, #4169e1);
  --pin-rim: rgba(9, 12, 22, 0.5);
  position: relative;
  width: 26px;
  height: 38px;
  cursor: pointer;
}

.loc-pin-chip {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 20px;
  color: var(--pin-ink);
  background: var(--pin-body);
  border-radius: var(--dc-radius-sm, 6px);
  /* Hairline rim as a shadow rather than a border: a real border would sit
     between the chip and its tail triangle and break the silhouette. */
  box-shadow:
    0 0 0 1px var(--pin-rim),
    0 3px 10px rgba(0, 0, 0, 0.45);
  transition: transform 0.16s ease, box-shadow 0.16s ease,
    background-color 0.16s ease, color 0.16s ease;
}

.loc-pin-chip::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -5px;
  border-top: 5px solid var(--pin-body);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  transition: border-top-color 0.16s ease;
}

.loc-pin-glyph {
  display: block;
  width: 11px;
  height: 11px;
  fill: currentColor;
}

/* The ground ring marks the exact coordinate, so nothing that moves on hover
   is allowed to touch it. White core + coloured rim so it reads on any tile. */
.loc-pin-ring {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px var(--pin-ink),
    0 2px 6px rgba(0, 0, 0, 0.55);
  transition: box-shadow 0.16s ease;
}

.loc-pin:hover {
  --pin-body: var(--dc-blue, #4169e1);
  --pin-ink: #ffffff;
}

.loc-pin:hover .loc-pin-chip {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.75),
    0 6px 16px rgba(0, 0, 0, 0.5);
}

.loc-pin:hover .loc-pin-ring {
  box-shadow:
    0 0 0 2px var(--dc-blue, #4169e1),
    0 0 12px rgba(65, 105, 225, 0.85),
    0 2px 6px rgba(0, 0, 0, 0.55);
}

/* Leaflet puts tabindex="0" on marker icons but ships no visible focus style.
   The white outer band is what separates the focus ring from busy terrain. */
.leaflet-marker-icon:focus-visible {
  outline: none;
}

.leaflet-marker-icon:focus-visible .loc-pin-chip {
  box-shadow:
    0 0 0 2px var(--dc-blue, #4169e1),
    0 0 0 5px rgba(255, 255, 255, 0.9),
    0 3px 10px rgba(0, 0, 0, 0.45);
}

/* Touch pointers only. On a mouse the tight 26x38 box is the better target —
   an invisible 44px pad would let neighbouring pins steal each other's clicks. */
@media (pointer: coarse) {
  .loc-pin::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    margin-left: -22px;
  }
}

/* Pending pin (while filling the form in edit mode). Amber body with dark ink
   so it stays high-contrast and unmistakably "not saved yet". Only the ring's
   glow animates, and the resting state is fully legible because the global
   prefers-reduced-motion rule freezes animations on their first frame. */
.loc-pin-pending {
  --pin-body: var(--dc-amber, #e5ca7e);
  --pin-ink: #231a04;
}

.loc-pin-pending .loc-pin-ring {
  box-shadow:
    0 0 0 2px var(--dc-amber, #e5ca7e),
    0 2px 6px rgba(0, 0, 0, 0.55);
  animation: loc-pin-pulse 1.1s ease-in-out infinite alternate;
}

.loc-pin-purchasable {
  --pin-body: #f4c84a;
  --pin-ink: #17130a;
  --pin-rim: rgba(23, 19, 10, 0.75);
}

.loc-pin-home {
  --pin-body: #55d58a;
  --pin-ink: #082814;
}

.loc-pin-elite {
  --pin-body: #8b6ef3;
  --pin-ink: #ffffff;
}

.loc-pin-teammate {
  --pin-body: #49c9c7;
  --pin-ink: #062827;
}

.loc-pin-home .loc-pin-glyph,
.loc-pin-teammate .loc-pin-glyph {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.loc-pin.loc-pin-purchasable:hover,
.loc-pin.loc-pin-home:hover,
.loc-pin.loc-pin-elite:hover,
.loc-pin.loc-pin-teammate:hover {
  --pin-body: #ffffff;
  --pin-ink: #15171b;
}

.loc-pin-unavailable,
.loc-pin-unavailable:hover {
  --pin-body: #d8dbe1;
  --pin-ink: #6b7280;
  cursor: default;
  opacity: 0.78;
}

.loc-pin-unavailable:hover .loc-pin-chip {
  transform: none;
}

/* Locked pin (no grant for this location). Visible but plainly inert: greyed,
   padlocked, and not offering a hover affordance. The greying is presentation
   only — the drop data behind a locked pin was already withheld by the server
   (PAY-004), so styling is never what keeps it private. */
.loc-pin-locked,
.loc-pin-locked:hover {
  --pin-body: #dfe2e8;
  --pin-ink: #6b7280;
  cursor: default;
  opacity: 0.82;
}

.loc-pin-locked:hover .loc-pin-chip {
  transform: none;
  box-shadow:
    0 0 0 1px var(--pin-rim),
    0 3px 10px rgba(0, 0, 0, 0.45);
}

.loc-pin-locked:hover .loc-pin-ring {
  box-shadow:
    0 0 0 2px var(--pin-ink),
    0 2px 6px rgba(0, 0, 0, 0.55);
}

/* Marker names for screen readers. Leaflet's DivIcon ignores the `alt` marker
   option and we cannot set attributes on the icon root from an html string, so
   the name rides along as clipped text inside the focusable element. */
.loc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}

/* Locked popup: name + category only, no actions. */
.loc-popup-locked-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 4px 14px 14px;
  padding: 8px 10px;
  border-radius: var(--dc-radius-sm, 6px);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--dc-border, rgba(255, 255, 255, 0.1));
  color: var(--dc-muted-strong, #c4c4ca);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.loc-popup-unavailable {
  margin: 0 14px 8px;
  color: var(--dc-muted, #a7a7af);
  font-size: 12px;
}

.loc-target-dot,
.clone-location-target-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  border: 2px solid rgba(255, 62, 165, 0.9);
  box-shadow: 0 0 10px rgba(255, 62, 165, 0.55);
}

.loc-target-dot.loc-target-dot-item {
  background: #ffb24a;
  border-color: #fff2d0;
  box-shadow: 0 0 10px rgba(255, 178, 74, 0.7);
}

.clone-location-target-dot.is-selected {
  background: #ff3ea5;
  border-color: #ffffff;
  transform: scale(1.2);
}

@keyframes loc-pin-pulse {
  from {
    box-shadow:
      0 0 0 2px var(--dc-amber, #e5ca7e),
      0 2px 6px rgba(0, 0, 0, 0.55);
  }
  to {
    box-shadow:
      0 0 0 2px var(--dc-amber, #e5ca7e),
      0 0 14px rgba(229, 202, 126, 0.95),
      0 2px 6px rgba(0, 0, 0, 0.55);
  }
}

/* ---- Cluster bubble ----
   Same material as the pin chip, but round and haloed: a group of waypoints,
   not one precise point. Size buckets carry magnitude so the count is legible
   at a glance without reading it — keep them in sync with the bucket
   thresholds in iconCreateFunction (js/locations.js). */
.loc-cluster {
  --pin-body: #f7f8fa;
  --pin-ink: var(--dc-blue, #4169e1);
  --pin-rim: rgba(9, 12, 22, 0.5);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--pin-ink);
  font-family: var(--dc-font-display, "Barlow Condensed", Impact, sans-serif);
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--pin-body);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px var(--pin-rim),
    0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease,
    background-color 0.16s ease, color 0.16s ease;
}

.loc-cluster::before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  transition: border-color 0.16s ease;
}

.loc-cluster--sm { font-size: 13px; }
.loc-cluster--md { font-size: 15px; }
.loc-cluster--lg { font-size: 17px; }

/* Transform the bubble, never the icon root — markercluster animates the root
   when clusters split and merge. */
.loc-cluster:hover {
  --pin-body: var(--dc-blue, #4169e1);
  --pin-ink: #ffffff;
  transform: scale(1.06);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.75),
    0 6px 18px rgba(0, 0, 0, 0.5);
}

.loc-cluster:hover::before {
  border-color: rgba(65, 105, 225, 0.85);
}

.leaflet-marker-icon:focus-visible .loc-cluster {
  box-shadow:
    0 0 0 2px var(--dc-blue, #4169e1),
    0 0 0 5px rgba(255, 255, 255, 0.9),
    0 4px 14px rgba(0, 0, 0, 0.45);
}

/* markercluster animation base — only needed if not using MarkerCluster.css */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background: transparent !important;
}

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background: transparent !important;
}

/* ============================================================
   Popup card

   Same material as the map chrome: --dc-surface body, hairline --dc-border rim,
   Barlow for text. It used to run its own slate-navy palette (#111827/#253a55)
   and Arial, which made it the last surface on the map that looked like a
   different product — especially next to the waypoint pin it hangs off.

   Every rule that paints a button is scoped under .loc-popup on purpose. The
   global `button` rule in embenco-clone.css sets a background AND a hard-coded
   pink glow (a leftover from when --clone-primary was #FF3CAC); the extra class
   in the selector is what keeps that rule from reaching in here.
   ============================================================ */
.loc-popup-wrap .leaflet-popup-content-wrapper {
  background: var(--dc-surface, #1d1d1f);
  border: 1px solid var(--dc-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--dc-radius-md, 10px);
  padding: 0;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.62);
  color: var(--dc-text, #f2f2f2);
  min-width: 240px;
  max-width: 280px;
  overflow: hidden;
}

.loc-popup-wrap .leaflet-popup-content {
  margin: 0;
  width: auto !important;
}

/* Hide the default tip arrow and close button; we provide our own */
.loc-popup-wrap .leaflet-popup-tip-container {
  display: none;
}

.loc-popup-wrap .leaflet-popup-close-button {
  display: none !important;
}

/* ---- Popup inner layout ---- */
.loc-popup {
  font-family: var(--dc-font-body, "Barlow", "Segoe UI", system-ui, sans-serif);
  font-size: 14px;
}

.loc-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 13px 11px 10px 14px;
  gap: 8px;
}

/* Condensed display face, matching the MAP header in the chrome. */
.loc-popup-name {
  font-family: var(--dc-font-display, "Barlow Condensed", Impact, sans-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--dc-text, #f2f2f2);
  line-height: 1.15;
  letter-spacing: 0.01em;
  word-break: break-word;
}

.loc-popup-category {
  font-size: 10px;
  color: var(--dc-muted, #a7a7af);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
}

/* Scoped under .loc-popup so the global `button` rule cannot repaint it — it
   would otherwise arrive with a primary-blue fill and a pink drop shadow. */
.loc-popup .loc-popup-close {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  min-height: auto;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--dc-muted, #a7a7af);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dc-radius-sm, 6px);
  transition: color 0.12s ease, background-color 0.12s ease;
}

.loc-popup .loc-popup-close:hover {
  color: var(--dc-text, #f2f2f2);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.loc-popup .loc-popup-close svg {
  width: 15px;
  height: 15px;
}

/* The visible control stays 28px so it does not crowd the name, and the touch
   target is padded out to 44px on coarse pointers only — same approach as the
   pin, for the same reason. */
@media (pointer: coarse) {
  .loc-popup .loc-popup-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    margin-left: -22px;
  }
}

.loc-popup-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.loc-popup-img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
}

.loc-popup-preview,
.loc-popup-preview-fallback {
  display: block;
  width: 100%;
  height: 142px;
}

.loc-popup-preview {
  object-fit: cover;
}

.loc-popup-preview-fallback {
  display: grid;
  place-content: center;
  background:
    radial-gradient(circle at 72% 24%, rgba(244, 200, 74, 0.24), transparent 30%),
    linear-gradient(135deg, #1b222a, #0d1014 64%);
  color: var(--dc-muted, #a7a7af);
  text-align: center;
}

.loc-popup-preview-fallback strong {
  color: var(--dc-gold, #f4c84a);
  font-size: 34px;
  letter-spacing: -0.08em;
}

.loc-popup-preview-fallback span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.loc-popup-purchase-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px 10px;
}

.loc-popup-purchase-summary strong {
  color: var(--dc-text, #f7f7f8);
  font-size: 16px;
}

.loc-popup-purchase-summary span {
  color: var(--dc-muted, #a7a7af);
  font-size: 11px;
}

.loc-popup-notes {
  padding: 0 14px 10px;
  font-size: 12.5px;
  color: var(--dc-muted, #a7a7af);
  line-height: 1.5;
}

.loc-popup-actions {
  padding: 4px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.loc-popup .loc-popup-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  /* Matches the 44px floor the map page sets on every button; stated here so
     this file reads as the full spec for the control rather than inheriting a
     number silently from competitive-ui.css. */
  min-height: 44px;
  padding: 9px 12px;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--dc-radius-sm, 6px);
  text-align: center;
  box-shadow: none;
  transition: background-color 0.14s ease, border-color 0.14s ease,
    color 0.14s ease;
  text-decoration: none;
}

.loc-popup .loc-popup-btn svg {
  width: 15px;
  height: 15px;
}

.loc-popup .loc-popup-btn:focus-visible {
  outline: 2px solid var(--dc-blue-bright, #8eacff);
  outline-offset: 2px;
}

/* Primary action — the only filled button in the card. */
.loc-popup .loc-popup-route {
  background: var(--dc-blue, #4169e1);
  border-color: var(--dc-blue, #4169e1);
  color: #ffffff;
}

.loc-popup .loc-popup-free {
  background: var(--dc-gold, #f4c84a);
  border-color: var(--dc-gold, #f4c84a);
  color: #15130b;
}

.loc-popup .loc-popup-unlock {
  background: var(--dc-gold, #f4c84a);
  border-color: var(--dc-gold, #f4c84a);
  color: #15130b;
}

.loc-popup .loc-popup-try {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--dc-border, rgba(255, 255, 255, 0.16));
  color: var(--dc-text, #f7f7f8);
}

.loc-popup-passes {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--dc-muted-strong, #c4c4ca);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

.loc-popup-outage {
  margin: 0 14px 12px;
  padding: 10px;
  border: 1px solid rgba(255, 125, 125, 0.28);
  border-radius: var(--dc-radius-sm, 6px);
  background: rgba(255, 125, 125, 0.08);
}

.loc-popup .loc-popup-home,
.loc-popup .loc-popup-elite {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--dc-border, rgba(255, 255, 255, 0.16));
  color: var(--dc-text, #f7f7f8);
}

.loc-popup .loc-popup-free:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.loc-popup .loc-popup-try:disabled,
.loc-popup .loc-popup-route:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

@media (max-width: 620px) {
  .loc-popup-wrap {
    position: fixed !important;
    z-index: 1200 !important;
    top: auto !important;
    right: auto !important;
    bottom: 72px !important;
    left: 8px !important;
    width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 142px);
    transform: none !important;
  }

  .loc-popup-wrap .leaflet-popup-content-wrapper {
    width: 100%;
    max-height: calc(100vh - 142px);
    min-width: 0;
    max-width: none;
    overflow-y: auto;
    border-radius: 14px;
  }

  .loc-popup-wrap .leaflet-popup-content {
    width: auto !important;
  }

  .loc-popup-preview,
  .loc-popup-preview-fallback {
    height: 120px;
  }
}

.loc-popup .loc-popup-route:hover {
  background: var(--clone-primary-hover, #3f67dc);
  border-color: var(--clone-primary-hover, #3f67dc);
}

/* Secondary action — outlined, so the card has one obvious primary. */
.loc-popup .loc-popup-share {
  background: transparent;
  border-color: var(--dc-border-strong, rgba(255, 255, 255, 0.18));
  color: var(--dc-muted-strong, #c4c4ca);
}

.loc-popup .loc-popup-share:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--dc-border-strong, rgba(255, 255, 255, 0.18));
  color: var(--dc-text, #f2f2f2);
}

/* Edit mode button visibility
   - Normal mode: show dropmap/route, hide edit/remove
   - Edit mode  : hide dropmap/route, show edit/remove   */
.loc-edit-btns   { display: none; }
.loc-normal-btns { display: flex; flex-direction: column; gap: 8px; }

body.loc-edit-mode .loc-normal-btns { display: none; }
body.loc-edit-mode .loc-edit-btns   { display: flex; flex-direction: column; gap: 8px; }

/* Edit button — neutral raised surface, not a colour of its own. */
.loc-popup .loc-popup-edit {
  background: var(--dc-surface-raised, #232326);
  border-color: var(--dc-border-strong, rgba(255, 255, 255, 0.18));
  color: var(--dc-text, #f2f2f2);
}

.loc-popup .loc-popup-edit:hover {
  background: #2b2b2f;
}

/* Remove is destructive, so it is the one place the red token is used. It stays
   tinted rather than filled — a solid red button next to Edit would read as the
   primary action in edit mode. */
.loc-popup .loc-popup-remove {
  background: var(--dc-red-soft, rgba(255, 59, 77, 0.13));
  border-color: rgba(255, 59, 77, 0.38);
  color: var(--dc-red, #ff3b4d);
}

.loc-popup .loc-popup-remove:hover {
  background: rgba(255, 59, 77, 0.22);
  border-color: rgba(255, 59, 77, 0.55);
}

/* ============================================================
   Locations sidebar section
   ============================================================ */
.loc-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--clone-panel-border);
}

.loc-section h2 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--clone-ready);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.loc-count-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--clone-secondary);
  color: var(--clone-muted-text);
  font-size: 12px;
  border-radius: 3px;
  margin-bottom: 10px;
}

/* Edit mode toggle button */
#locEditModeBtn {
  width: 100%;
  background: var(--clone-secondary);
  color: var(--clone-text);
}

#locEditModeBtn.edit-active {
  background: #7c3aed;
  color: #ffffff;
}

/* Edit panel container */
#locEditPanel {
  margin-top: 12px;
  padding: 12px;
  background: var(--clone-card-bg);
  border: 1px solid var(--clone-card-border);
}

#locEditPanel p {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--clone-muted-text);
  line-height: 1.5;
}

/* ── Catalog authoring surfaces (CAT-001) ─────────────────────────────────── */

.loc-draft-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-top: 1px solid var(--clone-card-border);
  border-bottom: 1px solid var(--clone-card-border);
}

.loc-draft-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.loc-draft-toggle input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--clone-primary);
}

.loc-pending-badge {
  padding: 3px 9px;
  border: 1px solid rgba(124, 58, 237, 0.5);
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.16);
  color: #d4c2ff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.loc-draft-actions,
.loc-io-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.loc-draft-actions:empty {
  margin-top: 0;
}

.loc-draft-actions button,
.loc-io-row button {
  flex: 1 1 0;
  min-width: 0;
  font-size: 12px;
}

#locDownloadBtn,
#locImportBtn {
  font-weight: 700;
}

/* Import preview — the diff an operator approves before anything is written. */
.loc-import-preview {
  margin-top: 10px;
  padding: 10px;
  background: var(--clone-map-bg);
  border: 1px solid var(--clone-card-border);
  border-radius: 6px;
}

.loc-import-heading {
  margin: 0 0 8px !important;
  color: var(--clone-text) !important;
  font-size: 12px !important;
  font-weight: 700;
}

.loc-import-summary {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--clone-muted-text);
}

.loc-import-summary .loc-import-added { color: #7ee787; }
.loc-import-summary .loc-import-changed { color: #ffd479; }
.loc-import-summary .loc-import-removed { color: #ff9da8; }

.loc-import-warn {
  margin: 8px 0 0 !important;
  color: #ff9da8 !important;
  font-size: 11px !important;
}

.loc-import-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.loc-import-actions button {
  flex: 1 1 0;
  font-size: 12px;
}

/* A version conflict is the one failure the operator must act on, so it holds
   the screen with its recovery action attached. */
.loc-conflict-banner {
  margin-top: 10px;
  padding: 10px;
  background: rgba(255, 77, 106, 0.12);
  border: 1px solid rgba(255, 77, 106, 0.4);
  border-radius: 6px;
}

.loc-conflict-banner p {
  margin: 0 0 8px !important;
  color: #ffb4c0 !important;
  font-size: 12px !important;
}

.loc-conflict-banner button {
  width: 100%;
  font-size: 12px;
}

.loc-field-error {
  display: block;
  margin-top: 4px;
  color: #ff9da8;
  font-size: 11px;
}

/* Catalog image picker (CAT-002). The preview is capped well below the natural
   size of the downscaled upload so a tall screenshot cannot push the save
   button out of the panel. */
#locGenerateImageBtn {
  margin-bottom: 6px;
}

.loc-image-preview {
  margin-top: 8px;
}

.loc-image-preview[hidden] {
  display: none;
}

.loc-image-preview img {
  display: block;
  width: 100%;
  max-height: 130px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--clone-map-bg, #14141a);
}

.loc-image-preview button {
  margin-top: 6px;
}

.loc-image-status {
  display: block;
  min-height: 14px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--clone-muted-text, #a7a7af);
}

.loc-image-status.ok {
  color: #7ee787;
}

/* Undo / inline confirm. Fixed so it stays reachable while the map has focus. */
.loc-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(520px, calc(100vw - 32px));
  padding: 10px 12px;
  transform: translateX(-50%);
  background: #1d1d1f;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.5);
  color: #f2f2f2;
  font-size: 13px;
}

.loc-toast[hidden] {
  display: none;
}

.loc-toast-text {
  flex: 1 1 auto;
  min-width: 0;
}

.loc-toast-btn {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  color: #f2f2f2;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.loc-toast-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.loc-toast-btn.danger {
  border-color: rgba(255, 77, 106, 0.5);
  color: #ff9da8;
}

/* A draggable pin should say so before it is grabbed. */
.loc-edit-mode .leaflet-marker-draggable {
  cursor: grab;
}

.loc-edit-mode .leaflet-marker-draggable:active {
  cursor: grabbing;
}

.loc-save-status {
  min-height: 16px;
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--clone-muted-text);
}

.loc-save-status.ok {
  color: #7ee787;
}

.loc-save-status.warn {
  color: var(--clone-warn);
}

/* New pin form */
#locNewPinForm {
  margin-top: 14px;
  padding: 12px;
  background: var(--clone-map-bg);
  border: 1px solid var(--clone-map-border);
}

#locNewPinForm .loc-form-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--clone-warn);
  text-transform: uppercase;
  margin: 0 0 12px;
  letter-spacing: 0.04em;
}

.loc-form-field {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.loc-form-field label {
  font-size: 11px;
  font-weight: 700;
  color: var(--clone-muted-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.loc-form-field input,
.loc-form-field textarea,
.loc-form-field select {
  width: 100%;
  padding: 6px 8px;
  color: var(--clone-text);
  background: var(--clone-input-bg);
  border: 1px solid var(--clone-input-border);
  font-family: inherit;
  font-size: 13px;
  box-sizing: border-box;
}

.loc-form-field textarea {
  resize: vertical;
  min-height: 56px;
}

.loc-form-field input::placeholder,
.loc-form-field textarea::placeholder {
  color: var(--clone-muted-text);
  opacity: 0.7;
}

.loc-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.loc-form-actions button {
  flex: 1;
  padding: 8px;
  font-size: 13px;
}

.loc-target-help,
.loc-target-empty,
.loc-target-capture-hint {
  margin: 0 0 8px;
  color: var(--clone-muted-text);
  font-size: 12px;
  line-height: 1.4;
}

.loc-target-capture-hint {
  color: var(--clone-warn);
  min-height: 16px;
}

.loc-target-list {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
}

.loc-target-row {
  display: grid;
  gap: 6px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--clone-card-border);
}

.loc-target-row-head,
.loc-target-row-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.loc-target-row-head strong {
  font-size: 12px;
  color: var(--clone-text);
}

.loc-target-row-head button,
.loc-target-move-btn,
#locAddTargetBtn {
  padding: 6px 8px;
  font-size: 12px;
}

.loc-interior-editor {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(255, 178, 74, 0.35);
  background: rgba(255, 178, 74, 0.06);
}

.loc-rooftop-editor {
  border-color: rgba(255, 128, 72, 0.5);
  background: rgba(255, 128, 72, 0.08);
}

.loc-rooftop-height-note {
  margin: 0;
  color: var(--clone-muted-text);
  font-size: 11px;
  line-height: 1.4;
}

.loc-interior-help,
.loc-surface-warning {
  margin: 0;
  color: var(--clone-muted-text);
  font-size: 11px;
  line-height: 1.45;
}

.loc-surface-warning {
  color: var(--clone-warn);
}

.loc-interior-point-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  color: var(--clone-text);
  font-size: 11px;
}

.loc-interior-point-row button,
.loc-surface-import-btn,
.loc-surface-auto-btn,
.loc-surface-anchor-btn {
  padding: 6px 8px;
  font-size: 11px;
}

.loc-surface-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.loc-surface-actions .loc-surface-anchor-btn {
  grid-column: 1 / -1;
}

.loc-surface-actions button {
  min-width: 0;
  line-height: 1.25;
}

.loc-surface-auto-status {
  color: var(--clone-warn);
  font-size: 10px;
  line-height: 1.4;
}

.loc-interior-control {
  display: grid;
  gap: 4px;
  color: var(--clone-muted-text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.loc-interior-control input,
.loc-interior-control select {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  color: var(--clone-text);
  background: var(--clone-input-bg);
  border: 1px solid var(--clone-input-border);
  font: 13px/1.2 inherit;
  text-transform: none;
}

.loc-surface-source {
  color: var(--clone-muted-text);
  font-size: 10px;
  line-height: 1.4;
}