/* Power Law geographic bubble map.
 *
 * Used on /power-law-outcomes/ (full universe) and on every sector page
 * (filtered to that sector via the citiesBySector data block). The
 * page just needs:
 *   <link rel="stylesheet" href="/css/power-law-geo-map.css">
 *   <div id="powerLawGeoMap"
 *        data-sector-slug=""              (omit or empty for global)
 *        data-eyebrow="01 · Geographic map"
 *        data-title="Power Law outcomes around the world"
 *        data-subtitle="Every Power Law outcome city, plotted by company concentration. Hover any bubble for the city total."></div>
 *   <script src="/js/power-law-geo-map.js" defer></script>
 *
 * Dark mode by default; land-on-ocean is tuned to sit inside the
 * Power Law page's navy system without looking like a separate embed.
 */

.pl-geo-section {
    --pl-geo-sea: #11192e;
    --pl-geo-land: #303a55;
    --pl-geo-land-stroke: rgba(170, 187, 224, 0.16);
    --pl-geo-rule: rgba(255, 255, 255, 0.035);
    padding: 4rem 0;
}
.pl-geo-section-inner { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; }
.pl-geo-section-head { margin-bottom: 1.5rem; }
.pl-geo-eyebrow { font-family: 'Source Serif 4', Georgia, serif; font-size: 0.9375rem; font-style: italic; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--orange, #F2A55E); margin-bottom: 0.45rem; }
.pl-geo-title { font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(1.8rem, 3.3vw, 2.8rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.015em; color: var(--white, #fff); margin: 0 0 0.65rem; }
.pl-geo-sub { font-size: 0.9875rem; line-height: 1.7; color: var(--text-light, rgba(255,255,255,0.72)); max-width: 680px; margin: 0; }

.pl-geo-card {
    background: var(--pl-geo-sea);
    border: 1px solid rgba(255,255,255,0.075);
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
}
.pl-geo-wrap {
    position: relative;
    width: 100%;
    height: 540px;
    background: var(--pl-geo-sea);
}
.pl-geo-svg { width: 100%; height: 100%; display: block; }
.pl-geo-country { fill: var(--pl-geo-land); stroke: var(--pl-geo-land-stroke); stroke-width: 0.4; }
.pl-geo-graticule { fill: none; stroke: var(--pl-geo-rule); stroke-width: 0.4; }
.pl-geo-marker-glow { fill-opacity: 0.10; }
.pl-geo-marker-core {
    fill-opacity: 0.45;
    stroke: #fff;
    stroke-width: 0.6;
    stroke-opacity: 0.18;
    cursor: pointer;
    transition: fill-opacity 0.15s, stroke-opacity 0.15s, stroke-width 0.15s;
}
.pl-geo-marker-core:hover { fill-opacity: 0.9; stroke-opacity: 1; stroke-width: 1.6; }
.pl-geo-marker-label { fill: #fff; font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 800; font-size: 11px; text-anchor: middle; pointer-events: none; }
.pl-geo-tooltip {
    position: absolute;
    pointer-events: none;
    background: rgba(20,27,45,0.96);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.85rem;
    line-height: 1.35;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    box-shadow: 0 6px 28px rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity 0.12s;
    z-index: 5;
    white-space: nowrap;
}
.pl-geo-tooltip.visible { opacity: 1; }
.pl-geo-tooltip-name { font-weight: 700; }
.pl-geo-tooltip-detail { color: rgba(255,255,255,0.7); font-size: 0.78rem; }
.pl-geo-legend {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(20,27,45,0.82);
    border: 1px solid rgba(255,255,255,0.095);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.85);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.pl-geo-legend-title { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.55); font-size: 0.65rem; }
.pl-geo-legend-row { display: flex; flex-wrap: wrap; gap: 0.5rem 0.85rem; max-width: 260px; }
.pl-geo-legend-item { display: flex; align-items: center; gap: 0.3rem; }
.pl-geo-legend-dot { width: 0.6rem; height: 0.6rem; border-radius: 999px; }
.pl-geo-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: rgba(255,255,255,0.5); font-size: 0.95rem; padding: 2rem; text-align: center; }

@media (max-width: 768px) {
    .pl-geo-section { padding: 2.5rem 0; }
    .pl-geo-wrap { height: 360px; }
    .pl-geo-legend { top: 8px; right: 8px; padding: 0.45rem 0.6rem; }
    .pl-geo-legend-row { max-width: 200px; gap: 0.3rem 0.55rem; }
}