/* Cluster map (pattern B) embedded in the map page. */
.geo-sec { padding: 0 var(--pad) 24px; max-width: 1280px; margin: 0 auto; }
.geo-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.geo-bar .legend { display: flex; flex-wrap: wrap; gap: 6px; }
.btn-dl { font: 500 12px var(--mono); background: none; color: var(--text); border: 1px solid var(--line); padding: 8px 14px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.btn-dl:hover { border-color: var(--accent); color: var(--accent); }

.lg {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: none; border: 1px solid var(--line); color: var(--muted);
  font: 12px var(--font); padding: 5px 11px 5px 8px; border-radius: 99px; transition: opacity .2s, color .2s;
}
.lg:hover { color: var(--text); }
.lg svg { width: 12px; height: 12px; }
.lg small { font: 11px var(--mono); opacity: .8; }
.lg.dim { opacity: .35; }

.geo-scroll { overflow-x: auto; border-radius: 6px; border: 1px solid var(--line); background: #0a0b0d; }
.clusters-svg { display: block; width: 100%; min-width: 760px; height: auto; }
.geo-hint { display: none; font-size: 12px; margin-top: 8px; }

.c-meta { fill: #4de2c5; font: 500 12px "JetBrains Mono", monospace; letter-spacing: .15em; }
.c-title { fill: #e9eaec; font-size: 22px; font-weight: 500; }
.c-city-dot { fill: #e9eaec; }
.c-city-ring { fill: none; stroke: rgba(233,234,236,.35); }
.c-leader { stroke: rgba(233,234,236,.28); stroke-width: 1; fill: none; }
.c-donut-bg { fill: #0d1014; stroke: #22252b; }
.c-big { fill: #e9eaec; font-weight: 500; }
.c-rname { fill: #8b9099; font-size: 12px; }
.c-seg { stroke: #0a0b0d; stroke-width: 2; }
.c-bars-title { fill: #e9eaec; font-size: 15px; font-weight: 500; }
.c-bar-label { fill: #e9eaec; font-size: 13px; }
.c-bar-n { fill: #8b9099; font: 500 12px "JetBrains Mono", monospace; }
.c-fine { fill: #6b7079; font-size: 11px; }
.c-mark { cursor: pointer; transition: opacity .25s; }
.c-mark.dim { opacity: .12; }

.geo-tip {
  position: fixed; z-index: 50; pointer-events: none; max-width: 300px;
  background: #15181d; color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 10px 12px; font-size: 12px; line-height: 1.5;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.geo-tip[hidden] { display: none; }
.tip-row { display: flex; gap: 8px; }
.tip-row + .tip-row { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.tip-row i { flex: 0 0 8px; height: 8px; border-radius: 2px; margin-top: 5px; }
.tip-row b { display: block; font-weight: 500; font-size: 13px; }
.tip-row span, .tip-row em { display: block; color: var(--muted); font-style: normal; }
.tip-row em { font-size: 11px; opacity: .8; }

@media (max-width: 860px) {
  .geo-hint { display: block; }
}