/* Scoped regional connection UI; uses the existing light/dark/party palette. */
.regional-connections {
  margin: 1rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
}
.regional-picker { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.regional-picker label { margin: 0; font-weight: 700; }
.regional-picker select { width: auto; min-width: 190px; max-width: 100%; flex: 0 1 260px; }
.regional-connections .hint { margin: .7rem 0 .4rem; }
.regional-status { margin: .45rem 0; font-weight: 600; overflow-wrap: anywhere; }
.regional-addresses { margin: .6rem 0 0; border: 0; background: transparent; }
.regional-addresses summary { padding: .3rem 0; color: var(--muted); font-size: .95rem; }
.regional-addresses dl { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin: .6rem 0 0; }
.regional-addresses dt { color: var(--muted); font-size: .85rem; }
.regional-addresses dd { margin: 0; overflow-wrap: anywhere; }
.regional-port-url { min-width: 14rem; }
.regional-port-url code { display: block; margin-bottom: .4rem; white-space: normal; overflow-wrap: anywhere; }
pre[data-stratum-region-target] { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .regional-connections { padding: .85rem; }
  .regional-picker { align-items: stretch; gap: .4rem; }
  .regional-picker label { flex-basis: 100%; }
  .regional-picker select { width: 100%; flex: 1 1 100%; }
  .regional-addresses dl { display: block; }
  .regional-addresses dl > div + div { margin-top: .55rem; }
}