/* FlaroCity WatchTower staging shell stability and compact-map sizing. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

/* Use percentage width so the vertical scrollbar is never included in 100vw. */
html body .site-top .shell.nav,
html body.watchtower-dashboard .site-top .shell.nav {
  box-sizing: border-box !important;
  width: min(1880px, calc(100% - 32px)) !important;
  max-width: calc(100% - 32px) !important;
  margin-inline: auto !important;
}

/* Keep a readable button while a decorative image is decoding. */
.nav-image-links .image-btn.has-image {
  position: relative !important;
}

.nav-image-links .image-btn.has-image > .sr-only {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: nowrap !important;
  color: #fff !important;
  font-weight: 900 !important;
}

.nav-image-links .image-btn.has-image > img {
  position: relative !important;
  z-index: 1 !important;
}

/* Give every primary navigation button the same deliberate neon presence. */
.nav-image-links .image-btn.has-image[aria-label="Home"] > img,
.nav-image-links .image-btn.has-image[aria-label="Docs"] > img {
  filter: drop-shadow(0 0 16px rgba(255, 157, 0, .58)) !important;
}

.nav-image-links .image-btn.has-image[aria-label="Features"] > img {
  filter: drop-shadow(0 0 16px rgba(34, 233, 255, .58)) !important;
}

.nav-image-links .image-btn.has-image[aria-label="Pricing"] > img,
.nav-image-links .image-btn.has-image[aria-label="Dashboard"] > img {
  filter: drop-shadow(0 0 16px rgba(104, 255, 18, .58)) !important;
}

/* Text fallbacks must occupy the same compact slot as the image modules. */
.watchtower-dashboard main.dashboard .feature-module-actions .feature-module-text-btn {
  box-sizing: border-box !important;
  width: 154px !important;
  min-width: 154px !important;
  max-width: 154px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

/* The source art is 3:1 and was being letterboxed inside the wider module
   slot. Fill the same 154 x 42 frame used by the Block List text button. */
.watchtower-dashboard main.dashboard .feature-module-actions .image-btn.has-image > img {
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  object-fit: fill !important;
}

/* Compact multi-location maps. Data, dots, coordinates, and rendering stay unchanged. */
.watchtower-dashboard main.dashboard .wt-fixed-map-grid,
.watchtower-dashboard main.dashboard .wt-location-map-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
  width: 100% !important;
  min-width: 0 !important;
}

.watchtower-dashboard main.dashboard .wt-fixed-map-card,
.watchtower-dashboard main.dashboard .wt-location-map-card {
  min-width: 0 !important;
  overflow: hidden !important;
}

/* The fixed renderer is the working map. Once it is populated, remove the
   unused primary canvas so the same location is not shown beneath a blank map. */
.watchtower-dashboard main.dashboard .wt-live-map-section:has(.wt-live-map-fallback:not([hidden])) .wt-live-map-panel {
  display: none !important;
}

.watchtower-dashboard main.dashboard .wt-fixed-map-tile,
.watchtower-dashboard main.dashboard .wt-live-map,
.watchtower-dashboard main.dashboard .leaflet-container {
  width: 100% !important;
  height: 300px !important;
  min-height: 300px !important;
  max-height: 300px !important;
  aspect-ratio: auto !important;
}

.watchtower-dashboard main.dashboard .wt-fixed-map-tile img,
.watchtower-dashboard main.dashboard .wt-live-map img,
.watchtower-dashboard main.dashboard .leaflet-container img {
  max-width: none !important;
}

@media (max-width: 1450px) {
  .watchtower-dashboard main.dashboard .wt-fixed-map-grid,
  .watchtower-dashboard main.dashboard .wt-location-map-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .watchtower-dashboard main.dashboard .wt-fixed-map-tile,
  .watchtower-dashboard main.dashboard .wt-live-map,
  .watchtower-dashboard main.dashboard .leaflet-container {
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
  }
}

@media (max-width: 700px) {
  html body .site-top .shell.nav,
  html body.watchtower-dashboard .site-top .shell.nav {
    width: calc(100% - 18px) !important;
    max-width: calc(100% - 18px) !important;
  }

  .watchtower-dashboard main.dashboard .wt-fixed-map-grid,
  .watchtower-dashboard main.dashboard .wt-location-map-grid {
    grid-template-columns: 1fr !important;
  }

  .watchtower-dashboard main.dashboard .wt-fixed-map-tile,
  .watchtower-dashboard main.dashboard .wt-live-map,
  .watchtower-dashboard main.dashboard .leaflet-container {
    height: 260px !important;
    min-height: 260px !important;
    max-height: 260px !important;
  }
}