/* A quiet, tactile atlas. The same component expands without losing its state. */
.places-globe { color: var(--ink); }
.globe-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.globe-heading .rail-title { margin: 0; }
.globe-stage { position: relative; isolation: isolate; width: 100%; aspect-ratio: 1; margin-top: 8px; }
.globe-stage::before { content: ''; position: absolute; z-index: -1; width: 61%; height: 5%; left: 19.5%; bottom: 2%; border-radius: 50%; background: #43573517; filter: blur(6px); }
.globe-stage canvas, .globe-stage #globe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.globe-surface { pointer-events: none; }
.globe-markers { cursor: grab; touch-action: pan-y; border-radius: 4px; outline-offset: 3px; }
.globe-markers.dragging { cursor: grabbing !important; }
.globe-tooltip { position: absolute; transform: translateX(-50%); padding: 2px 6px; pointer-events: none; font: 12px/1.3 var(--serif); color: #394831; background: #f7f8efda; border-radius: 2px; max-width: 85%; text-align: center; }
.globe-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 14px; font: 10px/1.5 var(--sans); color: #858d7b; }
.globe-tools button { font: inherit; color: #4c5d43; padding: 10px 0 10px 10px; background: none; border: 0; cursor: pointer; }
.globe-tools button span { display: inline-block; margin-left: 4px; transition: transform .18s ease; }
.globe-tools button:hover span { transform: translate(2px,-2px); }
.globe-places { border-bottom: 1px solid var(--line); }
.globe-place { border-top: 1px solid var(--line); }
.globe-place .place-button { display: grid; grid-template-columns: 6px minmax(0,1fr) 12px; gap: 11px; align-items: center; padding: 13px 0; min-height: 50px; border: 0; cursor: pointer; list-style: none; }
.globe-place .place-button::-webkit-details-marker { display: none; }
.globe-place .place-dot { width: 5px; height: 5px; background: transparent; border: 1px solid #9ca68f; box-sizing: border-box; transition: background .18s ease, box-shadow .18s ease; }
.globe-place .place-label { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.globe-place .place-name { font: 16px/1.3 var(--serif); }
.globe-place .place-relation { font: 10px/1.5 var(--sans); color: #7c8570; text-align: right; margin-left: auto; }
.globe-place [aria-current='location'] .place-dot { background: #984e39; border-color: #984e39; box-shadow: 0 0 0 3px #984e3910; }
.globe-place [aria-current='location'] .place-name { color: #884b35; }
.globe-place.is-hovered .place-name, .globe-place summary:hover .place-name { color: #884b35; }
.place-chevron { width: 5px; height: 5px; border-right: 1px solid #8e9684; border-bottom: 1px solid #8e9684; transform: rotate(45deg); margin: -3px 0 0 3px; transition: transform .18s ease; }
.globe-place[open] .place-chevron { transform: rotate(225deg); margin-top: 3px; }
.place-panel { padding: 0 12px 16px 17px; color: #6e7863; animation: globe-reveal .18s ease both; }
.place-panel p { font: 12px/1.65 var(--sans); margin: 0 0 6px; }
.place-panel .source-refs { font-size: 9px; color: #929b87; }
.globe-credits { display: none; margin-top: 14px; font: 9px/1.6 var(--sans); color: #8c9580; }
.globe-credits summary { cursor: pointer; width: fit-content; }
.globe-credits p { margin-top: 8px; max-width: 360px; }
.globe-credits a { text-underline-offset: 3px; }
.globe-view-controls { display: flex; gap: 18px; }
.globe-view-controls[hidden], .globe-tools [hidden], .globe-tooltip[hidden] { display: none; }
.globe-view-controls button { padding: 8px 0; border: 0; border-bottom: 1px solid transparent; background: none; font: 11px/1.5 var(--sans); color: #818a75; cursor: pointer; }
.globe-view-controls button[aria-pressed='true'] { border-bottom-color: #718361; color: #34442c; }
.globe-dialog { width: min(960px,calc(100vw - 48px)); max-width: 960px; max-height: calc(100dvh - 48px); padding: 32px; border: 1px solid #d7ddca; border-radius: 3px; background: var(--paper); color: var(--ink); overflow: auto; box-shadow: 0 24px 100px #18251026; }
.globe-dialog::backdrop { background: #25311f55; backdrop-filter: blur(3px); }
.globe-close { position: absolute; right: 13px; top: 10px; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; color: #69765c; cursor: pointer; font: 25px/1 var(--sans); }
.places-globe.is-expanded { display: grid; grid-template-columns: minmax(0,1fr) 240px; column-gap: 32px; align-items: start; margin: 0; padding: 0; border: 0; }
.is-expanded .globe-heading { grid-column: 1/-1; padding: 0 26px 18px 0; border-bottom: 1px solid var(--line); }
.is-expanded .rail-title { font-size: 27px; }
.is-expanded .globe-stage { grid-column: 1; grid-row: 2; margin-top: 15px; overflow: hidden; }
.is-expanded .globe-tools { grid-column: 1; grid-row: 3; margin: 0; font-size: 11px; }
.is-expanded .globe-places { grid-column: 2; grid-row: 2/4; margin-top: 36px; }
.is-expanded .globe-credits { display: block; grid-column: 1/-1; }
.is-expanded .place-panel p { font-size: 13px; }
.is-expanded .place-name { font-size: 19px; }
.is-expanded .globe-tooltip { font-size: 15px; }
.is-detail .globe-stage::before { display: none; }
@keyframes globe-reveal { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }
@media(max-width:650px) {
  .globe-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 26px 20px 20px; }
  .places-globe.is-expanded { display: block; }
  .is-expanded .globe-heading { gap: 12px; padding-right: 22px; }
  .is-expanded .globe-stage { max-width: 430px; margin: 12px auto 0; }
  .is-expanded .globe-places { margin-top: 18px; }
  .is-expanded .place-name { font-size: 18px; }
  .globe-view-controls { gap: 13px; }
  .globe-view-controls button { font-size: 10px; }
}
@media(prefers-reduced-motion:reduce) { .place-panel { animation: none; } .place-chevron, .globe-tools button span, .globe-place .place-dot { transition: none; } .globe-dialog::backdrop { backdrop-filter: none; } }
@media print { .globe-tools, .globe-credits, .globe-close, .globe-view-controls { display: none !important; } .globe-dialog { position: static; box-shadow: none; } }