.atlas {
  margin-top: 30px;
  border: 1px solid #ccd4d6;
  background: #fffefa;
}
.atlas-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 24px 16px;
}
.atlas-heading h2 {
  font-size: 27px;
}
.atlas-heading p {
  margin-top: 5px;
  font-size: 14px;
  color: #526067;
}
.atlas-law {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 24px;
  background: #f1eee6;
  font-size: 13px;
  color: #514e42;
  border-block: 1px solid #dfddd3;
}
.unverified-mark {
  width: 15px;
  height: 15px;
  border: 1px solid #716d60;
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 3px,
    #b6b1a4 3px,
    #b6b1a4 4px
  );
}
.atlas-regions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 16px 24px;
}
.atlas-regions a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  min-height: 44px;
  border: 1px solid #c4cdcf;
  text-decoration: none;
  color: #304e59;
  background: white;
  font-size: 13px;
  font-weight: 600;
  border-radius: 3px;
}
.atlas-regions a:hover {
  background: #edf2f3;
}
.atlas-regions a[aria-current] {
  color: white;
  background: #315f72;
  border-color: #315f72;
}
.atlas-toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  border-block: 1px solid #e0e6e7;
  padding: 10px 24px;
  min-height: 57px;
}
.atlas-toolbar h3 {
  font-size: 18px;
  color: #294b58;
}
.atlas-toolbar h3:focus {
  outline: none;
}
.atlas-toolbar button {
  background: white;
  border: 1px solid #b7c8ce;
  padding: 8px 12px;
  min-height: 40px;
  font-size: 13px;
  color: #294b58;
  border-radius: 3px;
}
#map-hint {
  margin-left: auto;
  font-size: 12px;
  color: #53656d;
}
.atlas-canvas {
  background: #edf4f6;
  overflow: hidden;
}
#world-map {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1080 / 730;
}
.map-region-shape {
  cursor: pointer;
}
.map-region-shape path {
  fill: #cedbd6;
  stroke: #fffefa;
  stroke-width: 0.8px;
}
.map-region-shape:hover path,
.map-region-shape:focus path {
  fill: #adcbc5;
}
.map-region-shape[aria-current] path {
  fill: #b7cdd6;
}
.map-region-shape:focus-visible {
  outline: none;
}
.map-region-shape:focus-visible path {
  stroke: #70490e;
  stroke-width: 1.8px;
}
.is-region .map-region-shape:not([aria-current]) path {
  fill: #e3e7e4;
}
.map-labels a {
  text-decoration: none;
}
.map-labels text {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 17px;
  fill: #193f4b;
  stroke: #f7faf8;
  stroke-width: 6px;
  paint-order: stroke;
  stroke-linejoin: round;
}
.map-labels a:hover text,
.map-labels a:focus text {
  fill: #764a06;
}
.is-region .map-labels {
  display: none;
}
.pin-hit {
  fill: transparent;
}
.pin-dot {
  fill: #244d68;
  stroke: white;
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.map-pin:hover .pin-dot,
.map-pin:focus .pin-dot {
  fill: #8c4d13;
  stroke: #fff;
  stroke-width: 3px;
}
.map-pin:focus-visible {
  outline: none;
}
.atlas-caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 13px 24px;
  border-top: 1px solid #ccd4d6;
  font-size: 12px;
  color: #4c5f64;
}
.pin-key {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #244d68;
  margin-right: 6px;
}
.atlas-region-content {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 18px 24px;
  padding: 8px 24px 20px;
}
.atlas-region-content details {
  flex: 1;
  min-width: 220px;
}
.atlas-region-content summary {
  cursor: pointer;
  min-height: 44px;
  padding-block: 10px;
  font-size: 14px;
}
#map-guide-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 20px;
  margin-top: 10px;
}
#map-guide-list a {
  padding: 10px 0;
  border-top: 1px solid #dce2e0;
  font-size: 13px;
}
.atlas-bottom {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 24px;
  background: #f3f5ef;
  border-top: 1px solid #dce2e0;
}
.usa-shortcut {
  font-size: 14px;
  font-weight: 600;
}
.atlas-bottom small {
  color: #5b6863;
  font-size: 11px;
}
.atlas-nojs {
  padding: 14px 24px;
}
.map-wrap {
  cursor: pointer;
}
@media (max-width: 800px) {
  #map-guide-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .atlas-region-content details {
    width: 100%;
    flex-basis: 100%;
  }
}
@media (max-width: 600px) {
  .atlas {
    margin-top: 22px;
  }
  .atlas-heading {
    padding: 17px 14px 12px;
    gap: 12px;
  }
  .atlas-heading h2 {
    font-size: 23px;
  }
  .atlas-heading p {
    font-size: 12px;
  }
  .atlas-heading .text-link {
    font-size: 11px;
  }
  .atlas-law {
    padding: 10px 14px;
    gap: 7px;
    font-size: 12px;
  }
  .atlas-law > span:last-child {
    flex-basis: 100%;
  }
  .atlas-regions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px;
    gap: 6px;
  }
  .atlas-regions a {
    font-size: 12px;
    padding: 8px;
  }
  .atlas-toolbar {
    padding: 8px 14px;
    gap: 12px;
    flex-wrap: wrap;
  }
  #map-hint {
    flex-basis: 100%;
    margin-left: 0;
    font-size: 11px;
  }
  #world-map {
    min-height: 200px;
  }
  .atlas-canvas.is-region #world-map {
    aspect-ratio: 1.2;
    min-height: 280px;
  }
  .map-labels {
    display: none;
  }
  .atlas-caption,
  .atlas-bottom,
  .atlas-region-content {
    padding-inline: 14px;
  }
  .atlas-caption {
    font-size: 11px;
  }
  #map-guide-list {
    grid-template-columns: 1fr;
  }
}

.atlas-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid #ccd4d6;
}
.atlas-picker label {
  font-size: 13px;
}
.atlas-picker select,
.atlas-picker button {
  min-height: 44px;
  max-width: 100%;
  padding: 8px;
  background: white;
  color: #294b58;
  border: 1px solid #b7c8ce;
  border-radius: 3px;
}
#map-states path {
  fill: #cedbd6;
  stroke: #fffefa;
  stroke-width: 0.8px;
  cursor: pointer;
}
#map-states path:hover,
.map-region-shape path:hover {
  fill: #adcbc5;
}
#map-states path.is-selected,
.map-region-shape path.is-selected {
  fill: #83acbc;
  stroke: #315f72;
  stroke-width: 1.3px;
}

/* Selection paint belongs above neighboring country shapes. */
#world-map .map-region-shape path.is-selected {
  fill: #b7cdd6;
  stroke: #fffefa;
  stroke-width: 0.8px;
}
#map-outline path {
  fill: none;
  stroke: #315f72;
  stroke-width: 1.5px;
  stroke-linejoin: round;
}
#map-caribbean-area text {
  font:
    700 13px Arial,
    sans-serif;
  fill: #193f4b;
  stroke: #f7faf8;
  stroke-width: 4px;
  paint-order: stroke;
}
#map-caribbean-area:hover rect,
#map-caribbean-area:focus rect {
  fill: #315f7210;
  stroke: #315f72;
  stroke-width: 1px;
  stroke-dasharray: 3 3;
}

#map-place-labels text {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  fill: #243f49;
  stroke: #f7faf8;
  paint-order: stroke;
  stroke-linejoin: round;
}
#map-place-labels .selected-label {
  font-weight: 700;
  fill: #173948;
}

#map-place-labels a {
  cursor: pointer;
  text-decoration: none;
}
#map-place-labels a:hover text,
#map-place-labels a:focus text {
  fill: #753f0b;
  text-decoration: underline;
}
.atlas-canvas {
  position: relative;
}
.map-guide-card {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  background: #fffefa;
  border: 1px solid #9badb3;
  border-radius: 0;
  box-shadow: 0 3px 15px #183d3426;
  color: #243f49;
}
.map-guide-card strong,
.map-guide-card span {
  display: block;
  padding-right: 22px;
}
.map-guide-card span {
  font-size: 12px;
  margin: 4px 0 10px;
}
.map-guide-card a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
}
#map-card-close {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
  color: #243f49;
}

.map-city-tooltip {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  padding: 3px 6px;
  border-radius: 3px;
  background: #fffefa;
  color: #243f49;
  box-shadow: 0 1px 4px #183d3426;
  font:
    600 12px Arial,
    sans-serif;
}

.map-cluster circle {
  fill: #315f72;
  stroke: #fff;
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}
.map-cluster text {
  fill: white;
  font-family: Arial, sans-serif;
  font-weight: 700;
  pointer-events: none;
}
.map-cluster:hover circle,
.map-cluster:focus circle {
  fill: #753f0b;
}
#map-card-guides {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
  max-height: 230px;
  overflow: auto;
}
#map-card-note {
  font-size: 13px;
}
#map-cluster-zoom {
  min-height: 44px;
  margin-top: 8px;
}

.atlas-review {
  padding: 12px 24px;
  border-top: 1px solid #ccd4d6;
  font-size: 13px;
}
.map-mode-bar,
.map-camera-controls,
.map-list-close,
.map-gesture-help {
  display: none;
}
#map-open {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #b7c8ce;
  background: white;
  color: #294b58;
  border-radius: 4px;
  font-size: 13px;
}
.map-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #edf4f6;
  color: #243f49;
}
.map-dialog::backdrop {
  background: #edf4f6;
}
.map-dialog .atlas {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  border: 0;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  box-sizing: border-box;
}
.map-dialog .map-mode-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 12px;
  background: #183d34;
  color: white;
  flex: none;
}
.map-mode-bar strong {
  font-size: 15px;
}
.map-mode-bar small {
  display: block;
  font-size: 10px;
  font-weight: 400;
}
#map-close {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #718b81;
  background: #fffefa;
  color: #183d34;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
}
.map-dialog .atlas-heading,
.map-dialog .atlas-law,
.map-dialog .atlas-caption,
.map-dialog .atlas-review,
.map-dialog .usa-shortcut {
  display: none;
}
.map-dialog .atlas-toolbar {
  flex: none;
  min-height: 48px;
  padding: 4px 12px;
  gap: 8px;
  flex-wrap: nowrap;
}
.map-dialog .atlas-toolbar h3 {
  font-size: 15px;
  flex: 1;
}
.map-dialog .atlas-toolbar button {
  min-height: 44px;
  max-width: 60%;
  font-size: 12px;
  padding: 6px 8px;
}
.map-dialog #map-hint {
  display: none;
}
.map-dialog .atlas-canvas {
  flex: 1;
  min-height: 120px;
  position: relative;
}
.map-dialog #world-map {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.map-dialog #world-map:active {
  cursor: grabbing;
}
.map-dialog .map-camera-controls {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 10px;
  top: 10px;
  gap: 5px;
}
.map-camera-controls button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #9badb3;
  border-radius: 4px;
  background: #fffefa;
  color: #243f49;
  box-shadow: 0 1px 5px #183d3426;
}
#map-zoom-in,
#map-zoom-out {
  font-size: 24px;
}
#map-reset,
#map-list-toggle {
  font-size: 11px;
  padding: 5px;
}
.map-dialog .map-gesture-help {
  display: block;
  position: absolute;
  left: 8px;
  bottom: 6px;
  font-size: 11px;
  background: #fffefae6;
  padding: 3px 6px;
  pointer-events: none;
}
.map-dialog .atlas-regions {
  flex: none;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 5px 8px;
  gap: 5px;
  scrollbar-width: thin;
}
.map-dialog .atlas-regions a,
.map-dialog .atlas-regions button {
  flex: none;
  min-height: 44px;
  padding: 7px 10px;
  font-size: 12px;
  border: 1px solid #c4cdcf;
  border-radius: 3px;
  background: white;
  color: #304e59;
  white-space: nowrap;
}
.map-dialog .atlas-regions a[aria-current] {
  background: #315f72;
  color: white;
}
.map-dialog .atlas-picker {
  flex: none;
  display: flex;
  padding: 5px 8px;
  gap: 5px;
  flex-wrap: nowrap;
}
.map-dialog .atlas-picker label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.map-dialog .atlas-picker select {
  font-size: 16px;
  flex: 1;
  width: 0;
  min-width: 0;
  min-height: 44px;
}
.map-dialog .atlas-bottom {
  flex: none;
  padding: 3px 10px;
  justify-content: center;
}
.map-dialog .atlas-bottom small {
  font-size: 9px;
}
.map-dialog .atlas-region-content {
  display: none;
}
.map-dialog .map-guide-card {
  position: absolute;
  z-index: 4;
  left: 0;
  bottom: 0;
  max-height: 45%;
  overflow: auto;
  padding: 12px 16px 8px;
  border-radius: 0;
  box-shadow: 0 -3px 16px #183d3426;
  overscroll-behavior: contain;
}
.map-dialog #map-card-close {
  width: 44px;
  height: 44px;
}
.map-dialog #map-card-guides {
  max-height: none;
}
.map-dialog #map-card-note:empty {
  display: none;
}
.map-dialog .atlas-region-content.list-open {
  display: block;
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 60%;
  overflow: auto;
  background: #fffefa;
  border: 1px solid #9badb3;
  border-radius: 0;
  padding: 14px;
}
.map-dialog .map-list-close {
  display: block;
  position: absolute;
  right: 2px;
  top: 2px;
  width: 44px;
  height: 44px;
  border: 0;
  background: #fffefa;
  color: #243f49;
  font-size: 24px;
}
.map-dialog .atlas-region-content.list-open {
  padding-right: 48px;
}
@media (max-width: 800px) {
  .atlas-heading {
    flex-wrap: wrap;
  }
  #map-open {
    flex-basis: 100%;
  }
}
@media (max-height: 500px) {
  .map-dialog .map-gesture-help,
  .map-dialog .atlas-bottom {
    display: none;
  }
  .map-dialog .map-mode-bar {
    padding-block: 0;
  }
  .map-dialog .atlas-regions {
    padding-block: 0;
  }
  .map-dialog .atlas-toolbar {
    min-height: 44px;
  }
  .map-dialog .map-camera-controls {
    flex-direction: row;
    top: 6px;
  }
}

/* Viewport-based atlas: the bottom handle is always the guide-list entry. */
.map-city-bar {
  display: none;
}
.map-dialog .map-city-bar {
  display: block;
  flex: none;
  border-block: 1px solid #b8c9c8;
  background: #f8faf6;
}
.map-dialog #map-list-toggle {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: #183d34;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}
.map-dialog #map-list-toggle::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin: 0 auto 6px;
  border-radius: 3px;
  background: #94aaa4;
}
.map-camera-controls button:disabled {
  opacity: 0.5;
  cursor: default;
}
.map-city-label text {
  fill: #244d68;
}
@media (max-height: 500px) {
  .map-dialog #map-list-toggle {
    min-height: 36px;
    padding: 4px 12px;
  }
  .map-dialog #map-list-toggle::before {
    display: none;
  }
}

#map-caribbean-area rect {
  pointer-events: none;
}
.map-dialog #map-guide-list a {
  min-height: 44px;
}

/* Controls respond immediately; double-tap zoom belongs to the map canvas. */
.map-dialog button,
.map-dialog select,
.map-dialog a,
.map-dialog summary {
  touch-action: manipulation;
}

/* A scrollable preview opens into a canvas with compact, optional controls. */
#world-map {
  touch-action: pan-y;
}
#world-map #map-land path,
#world-map #map-states path {
  fill: var(--law-fill, #e0e4e2);
}
@media (hover: hover) and (pointer: fine) {
  #world-map #map-land path:hover,
  #world-map #map-states path:hover {
    filter: brightness(0.97);
  }
}
.map-dialog .map-mode-bar {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 3;
  padding: 0;
  background: transparent;
  gap: 6px;
}
.map-mode-bar button,
.map-law-key > summary {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #9badb3;
  border-radius: 5px;
  background: #fffefa;
  color: #243f49;
  box-shadow: 0 1px 5px #183d3426;
  font-size: 13px;
  cursor: pointer;
}
.map-dialog #map-close {
  font-size: 13px;
}
.map-place-panel {
  position: absolute;
  z-index: 6;
  top: 62px;
  left: 10px;
  right: 10px;
  max-height: calc(100% - 122px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #9badb3;
  border-radius: 8px;
  background: #fffefa;
  box-shadow: 0 3px 12px #183d3426;
}
.map-dialog .map-place-panel .atlas-toolbar {
  flex-wrap: wrap;
}
.map-dialog .map-place-panel .atlas-picker {
  flex-direction: column;
  flex-wrap: wrap;
}
.map-dialog .map-place-panel .atlas-picker select {
  width: 100%;
  flex: auto;
}
.map-dialog .map-place-panel .atlas-regions {
  flex-wrap: wrap;
}
.map-dialog .map-gesture-help {
  display: none;
}
.map-dialog .atlas-bottom {
  padding: 2px 8px;
}
.map-dialog #map-list-toggle {
  font-size: 13px;
  min-height: 44px;
  padding: 6px 12px;
}
.map-dialog #map-list-toggle::before {
  margin-bottom: 3px;
}
.map-law-key {
  position: absolute;
  z-index: 3;
  left: 8px;
  top: 8px;
  max-width: calc(100% - 16px);
}
.map-law-key > summary {
  display: flex;
  align-items: center;
  gap: 3px;
  width: max-content;
  list-style: none;
  box-sizing: border-box;
}
.map-law-key > summary::-webkit-details-marker {
  display: none;
}
.map-law-key i {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex: none;
  border: 1px solid #6d7c7c;
  border-radius: 2px;
}
.map-law-panel {
  position: absolute;
  left: 0;
  top: 50px;
  width: min(330px, calc(100vw - 60px));
  max-height: min(400px, 55dvh);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 14px;
  border: 1px solid #9badb3;
  border-radius: 8px;
  background: #fffefa;
  box-shadow: 0 3px 12px #183d3426;
  font-size: 12px;
  line-height: 1.5;
}
.map-law-panel p {
  margin: 8px 0;
}
.map-law-panel summary {
  min-height: 44px;
  padding-block: 10px;
  cursor: pointer;
}
.map-law-legend {
  list-style: none;
  margin: 12px 0;
  padding: 0;
}
.map-law-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}
.map-dialog .map-law-key {
  top: auto;
  bottom: 8px;
}
.map-dialog .map-law-panel {
  top: auto;
  bottom: 50px;
}
@media (max-height: 500px) {
  .map-dialog .map-camera-controls {
    top: 10px;
  }
  .map-law-panel {
    max-height: 45dvh;
  }
}

/* One compact map shell, shared by the inline preview and full-screen mode. */
.atlas-heading {
  padding: 6px 12px;
  gap: 12px;
  flex-wrap: nowrap;
  min-height: 52px;
}
.atlas-heading .text-link {
  font-size: 13px;
}
#map-open {
  flex-basis: auto;
  margin-left: auto;
  min-height: 40px;
  padding: 7px 12px;
  font-size: 12px;
  border: 0;
  border-radius: 0;
  background: #e6eeea;
  color: #183d34;
}
.map-ready .map-mode-bar {
  display: flex;
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 3;
  padding: 0;
  background: transparent;
  gap: 6px;
}
.map-ready #map-close {
  display: none;
}
.map-dialog #map-close {
  display: block;
}
.map-ready .atlas-caption,
.map-ready #map-hint,
.map-ready #map-view-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.map-place-panel {
  max-width: 440px;
  max-height: calc(100% - 112px);
  border-radius: 0;
  padding: 8px;
}
.map-ready .map-place-panel .atlas-toolbar {
  border: 0;
  padding: 0;
  min-height: 0;
}
.map-ready .map-place-panel .atlas-toolbar button {
  border: 0;
  padding: 8px;
  max-width: 100%;
  min-height: 40px;
  font-size: 12px;
}
.map-ready .map-place-panel .atlas-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 0;
  padding: 0;
  gap: 8px;
}
.map-ready .atlas-picker label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.map-ready .atlas-picker select {
  width: 100%;
  font-size: 16px;
  min-height: 44px;
  border-radius: 0;
}
.map-ready #map-caribbean {
  justify-self: start;
  padding: 0 8px;
  border: 0;
  font-size: 12px;
  min-height: 36px;
  grid-row: 3;
}
.map-ready .map-place-panel .atlas-regions {
  display: flex;
  flex-wrap: wrap;
  padding: 4px 0 0;
  gap: 0 4px;
}
.map-ready .map-place-panel .atlas-regions a {
  min-height: 36px;
  padding: 6px 8px;
  border: 0;
  font-size: 11px;
  background: transparent;
  color: #304e59;
  border-radius: 0;
}
.map-ready .map-place-panel .atlas-regions a[aria-current] {
  background: #e6eeea;
  color: #183d34;
}
.map-ready .map-city-bar {
  display: block;
  flex: none;
  border-top: 1px solid #c9d3d1;
  border-bottom: 0;
  background: #f8faf6;
}
.map-ready #map-list-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  background: #e6eeea;
  color: #183d34;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}
.map-list-action {
  flex: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.map-list-context {
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  color: #435b54;
}
.map-list-chevron {
  flex: none;
  font-size: 20px;
  line-height: 1;
}
#map-list-toggle[aria-expanded="true"] .map-list-chevron {
  transform: rotate(180deg);
}
.map-ready #map-list-toggle::before {
  display: none;
}
.map-ready .atlas-region-content {
  display: none;
}
.map-ready .atlas-region-content.list-open {
  display: block;
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 65%;
  overflow: auto;
  overscroll-behavior: contain;
  background: #fffefa;
  border: 0;
  border-top: 1px solid #9badb3;
  border-radius: 0;
  padding: 12px 48px 12px 16px;
  box-shadow: 0 -3px 16px #183d341a;
}
.map-ready .map-list-close {
  display: block;
  position: absolute;
  right: 2px;
  top: 2px;
  width: 44px;
  height: 44px;
  border: 0;
  background: #fffefa;
  color: #243f49;
  font-size: 24px;
}
.map-ready .atlas-region-content summary {
  padding-block: 8px;
  min-height: 36px;
  font-size: 12px;
}
.map-ready .atlas-region-content > details:not(.atlas-review) > summary {
  display: none;
}
.map-ready .atlas-review {
  padding: 8px 0 0;
  border: 0;
  font-size: 12px;
}
.map-ready #map-directory-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: 13px;
}
.map-guide-card {
  box-shadow: 0 -3px 16px #183d341a;
}
.map-ready .map-guide-card {
  position: absolute;
  z-index: 4;
  left: 0;
  bottom: 0;
  max-height: 50%;
  overflow: auto;
  padding: 12px 16px 8px;
  border: 0;
  border-top: 1px solid #9badb3;
}
.map-ready #map-card-close {
  width: 44px;
  height: 44px;
}
#map-card-note:empty {
  display: none;
}
.atlas-bottom,
.map-dialog .atlas-bottom {
  border: 0;
  padding: 3px 10px;
  justify-content: center;
  background: #f3f5ef;
}
.atlas-bottom small {
  font-size: 9px;
}
.map-law-key,
.map-dialog .map-law-key {
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  max-width: none;
}
.map-law-key > summary {
  width: 100%;
  min-height: 40px;
  justify-content: space-evenly;
  gap: 6px;
  padding: 6px 8px;
  border: 0;
  border-radius: 0;
  background: #fffefaf2;
  box-shadow: none;
  font-size: 11px;
  font-weight: 500;
}
.map-law-key > summary span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.map-law-key > summary i {
  width: 10px;
  height: 10px;
  border-radius: 1px;
}
.map-law-key > summary b {
  font-size: 13px;
  font-weight: 400;
}
.map-law-panel,
.map-dialog .map-law-panel {
  left: 8px;
  top: auto;
  bottom: 44px;
  width: min(360px, calc(100vw - 64px));
  max-height: 180px;
  border-radius: 0;
}
.map-dialog .map-law-panel {
  width: min(380px, calc(100vw - 16px));
  max-height: min(440px, 55dvh);
}
@media (min-width: 801px) {
  .map-law-key > summary {
    justify-content: center;
    gap: 24px;
    font-size: 12px;
  }
  .map-law-panel {
    max-height: 360px;
  }
}

/* A city preview is one compact action row; clusters retain their useful list. */
.map-ready .map-guide-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: 0 8px;
  padding: 6px 8px 6px 12px;
  background: #e3ece7;
  border-top-color: #b7c9bf;
}
.map-card-place {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  grid-column: 1;
  grid-row: 1;
}
.map-card-place strong,
.map-card-place span {
  display: inline;
  padding: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-card-place strong {
  font-size: 15px;
}
.map-card-place span {
  flex-shrink: 2;
  font-size: 12px;
  color: #4d625b;
}
.map-card-place span:empty,
#map-card-guides:empty {
  display: none;
}
.map-ready #map-card-close {
  position: static;
  grid-column: 3;
  grid-row: 1;
}
#map-card-link {
  grid-column: 2;
  grid-row: 1;
  padding: 0 10px;
  background: #213f35;
  color: #fffefa;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}
#map-card-note,
#map-card-guides {
  grid-column: 1 / -1;
}
#map-card-note {
  margin: 4px 0;
  font-size: 11px;
}
.map-guide-card.is-cluster .map-card-place {
  grid-column: 1 / 3;
}
.map-law-panel .map-attribution {
  margin-top: 12px;
  font-size: 11px;
}

/* The homepage preview leaves the map clear; detailed controls live in map mode. */
.map-ready .map-mode-bar,
.map-ready .map-city-bar {
  display: none;
}
.map-dialog .map-ready .map-mode-bar {
  display: flex;
}
.map-dialog .map-ready .map-city-bar {
  display: block;
}
.map-ready #map-open {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  min-height: 44px;
  margin: 0;
  background: #fffefa;
  border: 1px solid #b7c8ce;
  box-shadow: 0 1px 5px #183d3426;
}
.map-dialog #map-open,
.map-dialog .atlas-key-bar {
  display: none;
}
.atlas-key-bar {
  position: relative;
  border-top: 1px solid #c9d3d1;
  background: #fffefa;
}
.atlas-key-bar .map-law-key {
  position: relative;
  inset: auto;
}
.atlas-key-bar .map-law-key > summary {
  min-height: 44px;
  background: transparent;
}