:root {
  --directory-maroon: #4f1316;
  --directory-gold: #b88847;
  --directory-tan: #f0d89d;
  --directory-teal: #007581;
  --directory-dark: #202020;
}

.directory-map-tools {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(184, 136, 71, .4);
  font-family: "Optima Medium", Optima, "Segoe UI", sans-serif;
}

.map-style-picker {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 6px;
}

.map-style-picker span { color: var(--directory-maroon); font-size: .82rem; }

.map-style-picker button,
.export-repeaters-button {
  min-height: 34px;
  padding: 6px 9px;
  color: var(--directory-maroon);
  background: #fff;
  border: 1px solid var(--directory-gold);
  border-radius: 6px;
  font: 400 .78rem/1.1 "Optima Medium", Optima, "Segoe UI", sans-serif;
  cursor: pointer;
}

.map-style-picker button[aria-pressed="true"],
.map-style-picker button:hover,
.export-repeaters-button:hover {
  color: var(--directory-tan);
  background: #005a63;
}

.export-repeaters-button { width: 100%; background: #fff7e4; }

.directory-map-wrap .maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon,
.directory-map-wrap .maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon,
.directory-map .maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon,
.directory-map .maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
  background-image: none !important;
}

.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon::before { content: "+"; }
.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon::before { content: "−"; }
.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon::before,
.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon::before {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #202020;
  font: 400 24px/1 Arial, sans-serif;
}

.radio-map-wrap .maplibregl-popup.directory-popup-left,
.radio-map-wrap .maplibregl-popup.directory-popup-right {
  top: 76px !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 650 !important;
}

.radio-map-wrap.directory-popup-opening .maplibregl-popup:not(.directory-popup-ready) {
  opacity: 0 !important;
}

.directory-popup-connector {
  position: absolute;
  inset: 0;
  z-index: 640;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.radio-map-wrap {
  position: relative !important;
  isolation: isolate;
}

.directory-popup-connector polygon {
  fill: var(--directory-dark);
  stroke: var(--directory-gold);
  stroke-width: 2px;
  stroke-linejoin: round;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .28));
}

[data-directory-map-style="dark"] .directory-popup-connector polygon {
  fill: var(--directory-tan);
  stroke: var(--directory-maroon);
}

[data-directory-map-style="street"] .radio-map-wrap .maplibregl-popup-content,
[data-directory-map-style="street"] .radio-map-wrap .maplibregl-popup-content > div,
[data-directory-map-style="street"] .radio-map-wrap .maplibregl-popup-content [class*="bg-"] {
  color: var(--directory-tan) !important;
  background-color: var(--directory-dark) !important;
  border-color: var(--directory-gold) !important;
}

[data-directory-map-style="street"] .radio-map-wrap .maplibregl-popup-content :is(h1,h2,h3,h4,h5,h6,p,span,dt,dd,strong,a,label) {
  color: var(--directory-tan) !important;
}

[data-directory-map-style="dark"] .radio-map-wrap .maplibregl-popup-content,
[data-directory-map-style="dark"] .radio-map-wrap .maplibregl-popup-content > div,
[data-directory-map-style="dark"] .radio-map-wrap .maplibregl-popup-content [class*="bg-"] {
  color: var(--directory-maroon) !important;
  background-color: var(--directory-tan) !important;
  border-color: var(--directory-maroon) !important;
}

[data-directory-map-style="dark"] .radio-map-wrap .maplibregl-popup-content :is(h1,h2,h3,h4,h5,h6,p,span,dt,dd,strong,a,label) {
  color: var(--directory-maroon) !important;
}

/* Network and affiliation use a charcoal badge. Match its text to the tan popup. */
[data-directory-map-style="dark"] .radio-map-wrap .maplibregl-popup-content .popup-network,
[data-directory-map-style="dark"] .radio-map-wrap .maplibregl-popup-content .popup-network span {
  color: var(--directory-tan) !important;
}

[data-directory-map-style="street"] .radio-map-wrap .maplibregl-popup-content .popup-network,
[data-directory-map-style="street"] .radio-map-wrap .maplibregl-popup-content .popup-network span {
  color: var(--directory-tan) !important;
}

.radio-map-wrap .maplibregl-popup-content .popup-network {
  color: var(--directory-tan) !important;
  background: var(--directory-maroon) !important;
  border: 1px solid var(--directory-gold) !important;
}

.radio-map-wrap .maplibregl-popup-content .popup-network span {
  color: var(--directory-tan) !important;
  background: transparent !important;
}

[data-directory-map-style="dark"] .radio-map-wrap .maplibregl-popup-content .popup-band,
[data-directory-map-style="dark"] .radio-map-wrap .maplibregl-popup-content .popup-band span {
  color: var(--directory-tan) !important;
  background: var(--directory-maroon) !important;
  border-color: var(--directory-gold) !important;
}

.radio-map-wrap .maplibregl-popup-close-button {
  color: inherit !important;
  background: transparent !important;
}

.radio-map-wrap .maplibregl-popup-content {
  scrollbar-width: thin;
}

[data-directory-map-style="dark"] .radio-map-wrap .maplibregl-popup-content {
  scrollbar-color: var(--directory-maroon) var(--directory-tan);
}

[data-directory-map-style="street"] .radio-map-wrap .maplibregl-popup-content {
  scrollbar-color: var(--directory-gold) var(--directory-dark);
}

.radio-map-wrap .maplibregl-popup-content::-webkit-scrollbar { width: 10px; }
.radio-map-wrap .maplibregl-popup-content::-webkit-scrollbar-thumb { border-radius: 10px; }
[data-directory-map-style="dark"] .radio-map-wrap .maplibregl-popup-content::-webkit-scrollbar-track { background: var(--directory-tan); }
[data-directory-map-style="dark"] .radio-map-wrap .maplibregl-popup-content::-webkit-scrollbar-thumb { background: var(--directory-maroon); border: 2px solid var(--directory-tan); }
[data-directory-map-style="street"] .radio-map-wrap .maplibregl-popup-content::-webkit-scrollbar-track { background: var(--directory-dark); }
[data-directory-map-style="street"] .radio-map-wrap .maplibregl-popup-content::-webkit-scrollbar-thumb { background: var(--directory-gold); border: 2px solid var(--directory-dark); }

.radio-map-wrap .maplibregl-popup-content :is(.popup-grid,.popup-modes,.popup-features,.popup-allstar,.popup-digital,.popup-description,.popup-website,.popup-updated) {
  border-style: solid !important;
  border-width: 1px 1px 1px 4px !important;
  border-radius: 8px !important;
}

[data-directory-map-style="dark"] .radio-map-wrap .maplibregl-popup-content :is(.popup-grid,.popup-modes,.popup-features,.popup-allstar,.popup-digital,.popup-description,.popup-website,.popup-updated) {
  border-color: var(--directory-maroon) !important;
}

[data-directory-map-style="street"] .radio-map-wrap .maplibregl-popup-content :is(.popup-grid,.popup-modes,.popup-features,.popup-allstar,.popup-digital,.popup-description,.popup-website,.popup-updated) {
  border-color: var(--directory-gold) !important;
}

.radio-map-wrap .maplibregl-popup.directory-popup-left { left: 20px !important; right: auto !important; }
.radio-map-wrap .maplibregl-popup.directory-popup-right { left: auto !important; right: 20px !important; }
.radio-map-wrap .maplibregl-popup.directory-popup-left .maplibregl-popup-tip,
.radio-map-wrap .maplibregl-popup.directory-popup-right .maplibregl-popup-tip { display: none !important; }

#metrics .directory-original-metric { display: none !important; }

#metrics {
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background: var(--directory-dark) !important;
}

.directory-live-metric-row {
  z-index: 4;
  grid-row: 6/7;
  grid-column: 2/7;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  color: var(--directory-gold);
  text-align: center;
  font-family: "Optima Medium", Optima, "Segoe UI", sans-serif;
}

.directory-live-metric-row div { display: flex; flex-direction: column; gap: 18px; }
.directory-live-metric-row strong { font-size: clamp(2.3rem, 4vw, 4rem); font-weight: 400; }
.directory-live-metric-row span { font-size: 1rem; }

#directory-server-statistics {
  margin-top: 0;
  padding: 24px 24px 56px;
  color: var(--directory-gold);
  background: #202020;
  border-top: 0;
  font-family: "Optima Medium", Optima, "Segoe UI", sans-serif;
}

.server-statistics-inner { width: min(1224px, 100%); margin: auto; text-align: center; }
.server-kicker { margin: 0 0 18px; font-size: .9rem; letter-spacing: .06em; }
#directory-server-statistics h2 { margin: 0 0 42px; font-size: clamp(2rem, 4vw, 3.8rem); font-weight: 400; }
.server-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 18px; }
.server-stat-grid div { display: flex; flex-direction: column; gap: 10px; }
.server-stat-grid strong { color: var(--directory-tan); font-size: clamp(1.55rem, 2.8vw, 2.6rem); font-weight: 400; }
.server-stat-grid span { font-size: .95rem; }
.server-stat-grid strong[data-state="good"] { color: #35aeb6; }
.server-stat-grid strong[data-state="elevated"] { color: var(--directory-gold); }
.server-stat-grid strong[data-state="high"] { color: #e46b72; }

#admin-server-statistics {
  width: min(1224px, calc(100% - 40px));
  margin: 26px auto;
  padding: 28px;
  color: var(--directory-maroon);
  background: #fff;
  border: 1px solid rgba(184, 136, 71, .65);
  border-left: 8px solid var(--directory-teal);
  border-radius: 14px;
  font-family: "Optima Medium", Optima, "Segoe UI", sans-serif;
}

#admin-server-statistics h2 { margin: 0 0 22px; font-weight: 400; }
.admin-server-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.admin-server-grid div { padding: 16px; background: #fbf5e8; border-radius: 8px; text-align: center; }
.admin-server-grid strong, .admin-server-grid span { display: block; }
.admin-server-grid strong { margin-bottom: 8px; font-size: 1.45rem; font-weight: 400; }

@media (max-width: 760px) {
  .radio-map-wrap .maplibregl-popup.directory-popup-left,
  .radio-map-wrap .maplibregl-popup.directory-popup-right {
    top: 72px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
  }
  .radio-map-wrap .maplibregl-popup-content { max-width: 100% !important; }
  .directory-live-metric-row {
    grid-row: 6/11;
    grid-column: 1/2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 12px;
    padding: 0 18px;
  }
  .directory-live-metric-row div { gap: 8px; }
  .directory-live-metric-row strong { font-size: 2.15rem; }
  .directory-live-metric-row span { font-size: .88rem; }
  #directory-server-statistics { padding: 42px 18px; }
  .server-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-server-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}