.x-geo { --x-parch: #efe6cf; --x-sea: #d3d9c9; --x-land: #e7dbbb; --x-ink: #43361f; --x-line: #8a7552; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.x-geo__ctl { display: grid; gap: 8px; margin-bottom: 12px; }
.x-geo__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.x-geo__row .x-year { margin: 0; margin-right: auto; }
.x-geo__snap { font: var(--type-caption); color: var(--text-secondary); }
.x-geo__ticks { margin: 0 0 4px; }
.x-geo__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.x-geo__map { position: relative; height: clamp(360px, 64vh, 640px); overflow: hidden; border: 1px solid var(--x-gold-soft); border-radius: var(--r-m); background: var(--x-sea); touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.x-geo__map.is-drag { cursor: grabbing; }
.x-geo__map > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.x-geo__base .sea { fill: var(--x-sea); }
.x-geo__base .land { fill: var(--x-land); stroke: none; }
.x-geo__base .grat { fill: none; stroke: var(--x-line); stroke-opacity: 0.18; stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.x-geo__base .pol path { fill-opacity: 0.9; stroke: var(--x-line); stroke-opacity: 0.75; stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.x-geo__ov text { font-family: var(--sans); font-size: 12px; font-weight: var(--weight-medium); fill: var(--x-ink); paint-order: stroke; stroke: var(--x-parch); stroke-width: 3px; stroke-linejoin: round; text-anchor: middle; pointer-events: none; }
.x-geo__ov .d { cursor: pointer; }
.x-geo__ov .d .hit { fill: transparent; }
.x-geo__ov .d .m { fill: var(--pc); stroke: var(--x-ink); stroke-width: 1; }
.x-geo__ov .d.is-ap .m { fill: var(--x-parch); fill-opacity: 0.4; stroke: var(--pc); stroke-width: 3; }
.x-geo__ov .d.is-ap .o { fill: none; stroke: var(--x-ink); stroke-width: 1; }
.x-geo__ov .d:hover .m, .x-geo__ov .d:focus-visible .m { stroke-width: 2.5; }
.x-geo__ov .d:focus { outline: none; }
.x-geo__ov .d.is-sel .m { stroke: var(--x-deep); stroke-width: 3; }
.x-geo__pop { position: absolute; z-index: 3; width: min(280px, calc(100% - 16px)); max-height: 60%; overflow: auto; box-sizing: border-box; padding: 12px 14px; background: var(--x-navy); border: 1px solid var(--x-gold); border-radius: var(--r-s); box-shadow: var(--hark-shadow); cursor: auto; }
.x-geo__pop[hidden] { display: none; }
.x-geo__pop article + article { border-top: 1px solid var(--stroke-secondary); margin-top: 10px; padding-top: 10px; }
.x-geo__pop b { display: block; font: var(--type-label); color: var(--x-gold); padding-right: 36px; }
.x-geo__pop p { font: var(--type-small); margin: 4px 0 8px; }
.x-geo__x { position: absolute; top: 2px; right: 2px; width: var(--tap); height: var(--tap); border: 0; background: none; color: var(--text-secondary); font: var(--type-heading); cursor: pointer; }
.x-geo__x:hover { color: var(--x-gold); }
.x-geo__cap { margin: 8px 0 0; }
.x-geo__panel { position: sticky; top: 72px; max-height: calc(100vh - 88px); display: flex; flex-direction: column; background: var(--x-navy); border: 1px solid var(--x-gold-soft); border-radius: var(--r-m); overflow: hidden; }
.x-geo__sheet { display: none; }
.x-geo__tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border-bottom: 1px solid var(--stroke-secondary); }
.x-geo__tabs .x-chip[aria-selected="true"] { border-color: var(--x-gold); color: var(--x-gold); }
.x-geo__body { overflow: auto; padding: 12px 16px 16px; min-height: 0; }
.x-geo__body [hidden] { display: none; }
.x-geo__h { font: var(--type-heading); color: var(--x-gold); margin: 0 0 6px; }
.x-geo__sub { font: var(--type-caption); color: var(--text-secondary); margin: 12px 0 6px; }
.x-geo__list { list-style: none; margin: 8px 0 0; padding: 0; }
.x-geo__list li { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--stroke-secondary); }
.x-geo__fly { display: block; min-height: var(--tap); text-align: left; padding: 4px 0 4px 12px; border: 0; border-left: 3px solid var(--pc); background: none; color: var(--text-primary); font: var(--type-small); cursor: pointer; }
.x-geo__fly:hover b { color: var(--x-gold); }
.x-geo__fly b { display: block; font: var(--type-label); color: var(--pc); }
.x-geo__fly small { display: block; font: var(--type-caption); color: var(--text-secondary); margin-top: 2px; }
@media (max-width: 1000px) { .x-geo { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (max-width: 768px) {
  #pane-geo { padding-bottom: 72px; }
  .x-geo { grid-template-columns: 1fr; }
  .x-geo__map { height: max(300px, calc(100vh - 420px)); }
  .x-geo__chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; }
  .x-geo__chips .x-chip { flex: none; }
  .x-geo__panel { position: fixed; top: auto; left: 0; right: 0; bottom: calc(61px + env(safe-area-inset-bottom, 0px)); z-index: 55; max-height: 62vh; border-radius: var(--r-l) var(--r-l) 0 0; border-width: 1px 0 0; box-shadow: var(--hark-shadow); }
  .x-geo__sheet { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 52px; padding: 0 16px; border: 0; background: none; color: var(--text-primary); font: var(--type-label); cursor: pointer; flex: none; }
  .x-geo__sheet span:last-child { color: var(--x-gold); }
  .x-geo__panel:not(.is-open) .x-geo__tabs, .x-geo__panel:not(.is-open) .x-geo__body { display: none; }
}