/* ---------- Locations: the map ---------- */
.loc-page { max-width: 75rem; }
.loc-bar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.loc-spacer { flex: 1; }
.loc-stats { color: var(--text-2); font-size: 0.875rem; font-weight: 550; }
.loc-decades { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; margin: 0 0 0.875rem; }
.loc-decades-label { margin-right: 0.25rem; color: var(--text-2); font-size: 0.875rem; font-weight: 550; }
.loc-chip { display: inline-flex; align-items: center; gap: 0.4375rem; height: 2rem; padding: 0 0.75rem; border: 1px solid var(--border-strong); border-radius: 6.1875rem; background: var(--surface); color: var(--text-2); font: inherit; font-size: 0.875rem; font-weight: 550; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; }
.loc-chip small { color: var(--text-3); font-size: 0.75rem; font-weight: 600; }
.loc-chip:hover { border-color: var(--accent); color: var(--text); }
.loc-chip.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.loc-chip.is-on small { color: var(--accent-text); }
.loc-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.loc-pending { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; color: var(--text-2); font-size: 0.875rem; }
.loc-map { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.loc-svg { display: block; width: 100%; height: auto; cursor: grab; touch-action: none; user-select: none; }
.loc-svg:active { cursor: grabbing; }
.loc-sea { fill: var(--surface-2); }
.loc-land { fill: var(--surface-3); stroke: var(--border-strong); stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.loc-bubble, .loc-pin { cursor: pointer; }
.loc-bubble circle, .loc-pin circle { fill: var(--accent); fill-opacity: 0.88; stroke: var(--surface); stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: fill-opacity 0.12s; }
.loc-bubble:hover circle, .loc-pin:hover circle, .loc-bubble.is-on circle, .loc-pin.is-on circle { fill: var(--accent-hover); fill-opacity: 1; }
.loc-bubble.is-on circle, .loc-pin.is-on circle { stroke: var(--surface); stroke-width: 2.5; }
.loc-bubble.is-on .loc-halo { fill: none; fill-opacity: 0; stroke: var(--accent); stroke-width: 3px; stroke-opacity: 0.55; pointer-events: none; }
.loc-bubble text, .loc-pin text { fill: var(--on-accent); font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; font-family: inherit; }
.loc-arc { fill: none; stroke: var(--accent); stroke-opacity: 0.55; stroke-linecap: round; cursor: pointer; vector-effect: none; }
.loc-arc:hover, .loc-arc.is-on { stroke-opacity: 1; }
.loc-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.loc-zoom { position: absolute; z-index: 2; right: 0.875rem; bottom: 1.125rem; display: flex; flex-direction: column; gap: 2px; padding: 0.25rem; border: 1px solid var(--border-strong); border-radius: 0.75rem; background: var(--surface); box-shadow: var(--shadow-md); }
.loc-zoom button { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 0.5rem; background: none; color: var(--text-2); cursor: pointer; }
.loc-zoom button:hover { background: var(--accent-soft); color: var(--accent-text); }
.loc-empty { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--surface) 80%, transparent); }
.loc-drawer { position: absolute; top: 0.75rem; left: 0.75rem; bottom: 0.75rem; width: min(16.8rem, 36%); display: flex; flex-direction: column; border: 1px solid var(--border-strong); border-radius: 0.875rem; background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; }
.loc-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; padding: 0.875rem 1rem 0.5rem; }
.loc-drawer-head h2 { margin: 0; font-size: 1.125rem; line-height: 1.25; overflow-wrap: anywhere; }
.loc-drawer-head p { margin: 0.125rem 0 0; color: var(--text-2); font-size: 0.8125rem; }
.loc-drawer-body { flex: 1; overflow-y: auto; padding: 0 1rem 1rem; }
.loc-drawer-body h3 { margin: 0.875rem 0 0.25rem; font-size: 0.8125rem; font-weight: 650; color: var(--text-2); }
.loc-drawer-body h3 small { margin-left: 0.25rem; color: var(--text-3); font-weight: 550; }
.loc-drawer-body ul { list-style: none; margin: 0.25rem 0 0; padding: 0; }
.loc-drawer-body li a { display: flex; align-items: center; gap: 0.625rem; padding: 0.375rem 0.25rem; border-radius: 0.5rem; color: var(--text); text-decoration: none; }
.loc-drawer-body li a:hover { background: var(--accent-soft); }
.loc-person { display: flex; flex-direction: column; min-width: 0; }
.loc-person b { font-weight: 600; font-size: 0.9062rem; overflow-wrap: anywhere; }
.loc-person small { color: var(--text-2); font-size: 0.75rem; }
.loc-more { margin: 0.5rem 0 0; color: var(--text-3); font-size: 0.8125rem; }
.loc-credit { margin: 0.75rem 0 0; color: var(--text-3); font-size: 0.8125rem; }
.loc-missing { margin-top: 1.5rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.loc-missing h2 { margin: 0; font-size: 1.125rem; }
.loc-missing > p { margin: 0.25rem 0 1rem; color: var(--text-2); font-size: 0.875rem; }
.loc-missing ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.loc-missing li { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, 1.6fr) auto; align-items: center; gap: 0.75rem; }
.loc-missing li span { display: flex; flex-direction: column; }
.loc-missing li small { color: var(--text-2); }