.topic-photo { margin: 1.1rem 0 1.6rem; }
.topic-photo > img {
  display: block; width: 100%; height: auto; max-height: 360px;
  aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px;
}
.topic-photo figcaption {
  margin-top: .55rem; font-size: .78rem; line-height: 1.55;
  color: var(--danl-muted, #596579);
}
.topic-photo figcaption a { color: inherit; text-decoration: underline; }
.topic-map {
  margin: 1rem 0 1.75rem; padding: 1rem;
  background: var(--danl-surface, #f7f9fc);
  border: 1px solid var(--danl-line, #dce4ee); border-radius: 16px;
}
.topic-map-description { margin: 0 0 .85rem; font-size: .93rem; }
.topic-map-controls { display: flex; flex-wrap: wrap; align-items: end; gap: .65rem; margin-bottom: .7rem; }
.topic-map-control { display: flex; flex: 1 1 145px; flex-direction: column; gap: .25rem; min-width: 0; font-size: .78rem; font-weight: 650; }
.topic-map-control input, .topic-map-control select, .topic-map-reset {
  min-height: 40px; width: 100%; border: 1px solid var(--danl-line, #ccd6e3);
  border-radius: 7px; background: var(--bs-body-bg, #fff); color: var(--bs-body-color, #23334a);
  font: inherit; font-size: .88rem; padding: .45rem .6rem;
}
.topic-map-reset { width: auto; cursor: pointer; }
.topic-map-control input:focus-visible, .topic-map-control select:focus-visible, .topic-map-reset:focus-visible,
.topic-map-results button:focus-visible { outline: 3px solid #41a7cf; outline-offset: 2px; }
.topic-map-canvas { height: 480px; border-radius: 10px; background: #e5edf1; z-index: 0; }
.topic-map-status { font-size: .8rem; margin: .6rem 0 0; min-height: 1.3em; }
.topic-map-meta { font-size: .76rem; color: var(--danl-muted, #596579); margin: .45rem 0 0; }
.topic-map-meta a { color: inherit; text-decoration: underline; }
.topic-map-results { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0; }
.topic-map-results:empty { display: none; }
.topic-map-results button { border: 1px solid var(--danl-line, #ccd6e3); border-radius: 6px; background: var(--bs-body-bg, white); color: var(--bs-body-color, #23334a); padding: .3rem .5rem; font-size: .76rem; cursor: pointer; }
.topic-map-legend { display: flex; flex-wrap: wrap; gap: .35rem .85rem; padding-top: .6rem; font-size: .74rem; }
.topic-map-legend-title { flex-basis: 100%; font-weight: 650; }
.topic-map-legend-item { display: inline-flex; align-items: center; gap: .3rem; }
.topic-map-legend-swatch { display: inline-block; width: 16px; height: 12px; border: 1px solid #647b83; border-radius: 2px; }
.topic-map .leaflet-control-attribution { font-size: 10px; }
.topic-map .leaflet-popup-content-wrapper, .topic-map .leaflet-popup-tip { color: #21344c; background: #fff; }
.topic-map .leaflet-popup-content { margin: 14px 18px; font: 13px/1.5 system-ui, sans-serif; max-height: 310px; overflow: auto; }
.topic-map-popup h3 { font-size: 1rem; color: #173f73; line-height: 1.3; margin: 0 0 .35rem; }
.topic-map-popup p { margin: .3rem 0; font-size: .8rem; }
.topic-map-popup table { width: 100%; margin: .5rem 0; font-size: .78rem; border-collapse: collapse; }
.topic-map-popup th { font-weight: 500; text-align: left; padding: .22rem .55rem .22rem 0; color: #526477; }
.topic-map-popup td { text-align: right; padding: .22rem 0; font-weight: 650; }
.topic-team-icon { background: none; border: none; }
.topic-team-logo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 2px solid #173f73; box-shadow: 0 2px 5px #15263c45; color: #173f73; font: 700 11px system-ui, sans-serif; }
.topic-team-logo img { width: 34px; height: 34px; object-fit: contain; }
.topic-place-icon { background: none; border: none; }
.topic-place-dot { display: block; width: 13px; height: 13px; border-radius: 50%; background: #0b7393; border: 2px solid #fff; box-shadow: 0 1px 3px #173f7380; }
.topic-map-cluster { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #173f73; color: #fff; border: 3px solid #c4e5ef; font: 700 12px system-ui, sans-serif; box-shadow: 0 2px 5px #15263c40; }
.topic-map .leaflet-interactive:focus-visible { outline: 3px solid #f9a43c; }
.topic-map [hidden] { display: none !important; }
@media (max-width: 600px) {
  .topic-photo > img { aspect-ratio: 3 / 2; }
  .topic-map { padding: .7rem; }
  .topic-map-canvas { height: 400px; }
  .topic-map-control { flex-basis: 135px; }
  .topic-map-reset { flex: 1 1 100%; }
}