/* Styles for <waymark-map>. Loaded after the default stylesheet and before the
   content directory's style.css, so style.css can override anything here.
   Track colours are set with --waymark-track-color, --waymark-start-color and
   --waymark-end-color (on :root or on waymark-map). */

waymark-map {
  display: block;
  position: relative;
  height: 420px;
  margin: 1.5rem 0;
  overflow: hidden;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 8px;
  background: var(--code-bg, #f6f8fa);
}

.waymark-map__canvas {
  position: absolute;
  inset: 0;
}

.waymark-map__status {
  position: absolute;
  inset: 0;
  z-index: 1100; /* above Leaflet panes and controls */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  color: var(--muted, #656d76);
  background: var(--code-bg, #f6f8fa);
}
.waymark-map__status[hidden] { display: none; }
.waymark-map__status--error { color: var(--fg, #1f2328); }

/* Keep page-level image rules (rounded corners, etc.) off the map tiles. */
waymark-map .leaflet-container img { border-radius: 0; }