/*
 * The map (design surface #s12). MapLibre GL + Protomaps tiles are deferred (see MapController);
 * this is the layer/filter chrome plus a static placeholder standing in for the live canvas.
 * Bundled automatically alongside application.css by Propshaft (stylesheet_link_tag :app).
 */

.map-shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: calc(100vh - 64px);
}

@media (min-width: 860px) {
  .map-shell { grid-template-columns: 270px 1fr; }
}

.map-sidebar {
  padding: 20px 18px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.map-sidebar__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.map-layers { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.map-layers li { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px; }
.map-layers label { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--bone); margin: 0; cursor: default; }
.map-layers input { width: auto; margin: 0; }

.map-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.map-dot--line { width: 16px; height: 3px; border-radius: 2px; }

.map-chip--active { background: var(--bone-bright); color: var(--ink); border-color: var(--bone-bright); }

.map-canvas {
  position: relative;
  min-height: 420px;
  background: var(--well);
  background-image:
    repeating-linear-gradient(0deg, var(--border-soft) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, var(--border-soft) 0 1px, transparent 1px 46px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-canvas__placeholder { text-align: center; padding: 24px; }
.map-canvas__shape { width: 220px; height: auto; }
.map-canvas__label {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
}