/* DECANT — purchase location map (EPIC 6).
   Styles the custom pin/cluster markers and tones Leaflet's default chrome down
   to the app's tokens. Loaded after leaflet.css so these win without !important.
   Everything is scoped under .dcnt so it can't leak into the auth screens. */

/* Leaflet assigns its panes and controls z-indexes up to 1000 — far above this
   app's overlays (drawer 41, modal 50, toast 60). `isolation: isolate` gives the
   map card its own stacking context so those internal values compete only with
   each other, and the card as a whole sits at z-index 0 beneath every overlay.
   Without this the map paints straight over the add/edit modal and the drawer. */
.dcnt .dcnt-map-card {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

/* Purchase pin: a claret disc carrying the number of distinct wines bought
   there. A div icon (not Leaflet's default PNG) so it themes with the app and
   can't break on a stylesheet-relative image path. */
.dcnt .dcnt-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--on-accent);
  border: 2px solid var(--surface);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
  font-weight: 800;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

/* markercluster's own bubble, retinted from its default blue/green ramp.
   .marker-cluster-{small,medium,large} are the library's size buckets. */
.dcnt .marker-cluster-small div,
.dcnt .marker-cluster-medium div,
.dcnt .marker-cluster-large div {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.dcnt .marker-cluster-small,
.dcnt .marker-cluster-medium,
.dcnt .marker-cluster-large {
  background: color-mix(in srgb, var(--accent) 32%, transparent);
}

/* Leaflet chrome — controls, attribution and tooltips in app tokens. The tile
   canvas itself stays untouched. */
.dcnt .leaflet-container {
  background: var(--surface-2);
  font: inherit;
}
.dcnt .leaflet-bar a,
.dcnt .leaflet-bar a:hover {
  background: var(--surface);
  color: var(--txt-1);
  border-bottom-color: var(--line);
}
.dcnt .leaflet-control-attribution {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  color: var(--txt-3);
  font-size: 10.5px;
}
.dcnt .leaflet-control-attribution a { color: var(--txt-2); }
.dcnt .leaflet-tooltip {
  background: var(--surface);
  color: var(--txt-1);
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
  font-size: 12px;
}