.atlas-page { font-family: system-ui, sans-serif; height: 100dvh; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.atlas-edit-floating { position: absolute; top: 12px; left: 12px; z-index: 2; max-width: calc(100% - 100px); min-height: 42px; border-color: #706653; background: #14243bf5; color: #f1e4c8; box-shadow: 0 3px 12px #0004; }
.atlas-edit-floating:disabled { opacity: 0.65; cursor: not-allowed; }
.atlas-edit-floating[hidden] { display: none; }
.atlas-brand { display: block; margin-bottom: 8px; }
.atlas-return { display: inline-block; margin-bottom: 16px; color: var(--link); font-size: 0.9rem; }
.atlas-page main { padding: 0; max-width: none; width: 100%; height: 100%; min-height: 0; }
.atlas-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 100%; min-height: 0; overflow: hidden; }
.atlas-sidebar { min-width: 0; min-height: 0; padding: 20px; border-right: 1px solid var(--line); background: var(--sidebar); overflow: auto; overscroll-behavior: contain; }
.atlas-page-title { margin: 14px 0 22px; color: var(--accent); font-family: Georgia, 'Times New Roman', serif; font-size: 2.35rem; font-weight: 700; line-height: 1.15; letter-spacing: 0.025em; overflow-wrap: anywhere; }
.atlas-sidebar label { font-size: 0.9rem; }
.atlas-sidebar input[type="search"] { font-size: 1rem; }
.atlas-search-count { font-size: 0.75rem; color: var(--muted); }
.atlas-results { max-height: 290px; overflow: auto; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.atlas-result { display: flex; align-items: stretch; gap: 2px; margin-bottom: 3px; }
.atlas-result button { text-align: left; flex: 1; min-width: 0; font-size: 0.88rem; padding: 9px; }
.atlas-result small { display: block; color: var(--muted); font-size: 0.68rem; margin-top: 3px; }
.atlas-result > a { padding: 12px 8px; color: var(--link); align-self: center; }
.atlas-sidebar details { border-bottom: 1px solid var(--line); padding: 14px 0; font-size: 0.82rem; }
.atlas-sidebar summary { cursor: pointer; color: var(--accent); margin-bottom: 10px; }
.atlas-layers label { display: flex; align-items: center; margin: 8px 0; gap: 7px; }
.atlas-layers input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.atlas-legend p { font-size: 0.8rem; line-height: 1.6; color: var(--muted); }
.atlas-legend-items { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.atlas-legend-items > span { display: inline-flex; align-items: center; gap: 5px; }
.atlas-legend-symbol { background: #e8dcc0; border-radius: 3px; color: #6d573d; }
.atlas-unplaced > a { display: block; margin: 8px 0; color: var(--link); }
.atlas-map-panel { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-width: 0; min-height: 0; padding: 20px; background: radial-gradient(ellipse at top, #29343b, #19232c 78%); }
.atlas-map-panel > [data-atlas-editor-host]:empty { display: none; }
.atlas-stage { grid-column: 1; grid-row: 1; min-width: 0; min-height: 0; height: 100%; position: relative; overflow: hidden; border: 1px solid #8e7651; border-radius: 4px; background: #e6d7b2 url('./atlas-parchment-v1.webp') repeat; background-size: 600px; box-shadow: 0 0 0 4px #514737, 0 0 0 5px #8b7755, 0 9px 24px #0005; }
.atlas-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 36px 7px #7050263b, inset 0 0 3px #624c3280; }
.atlas-svg { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.atlas-svg:focus { outline: none; }
.atlas-svg:focus-visible { outline: 3px solid var(--accent); outline-offset: -4px; }
.atlas-svg.is-dragging { cursor: grabbing; }
.atlas-paper { fill: url('#atlas-parchment'); }
.atlas-ocean-wash { fill: #78978d; fill-opacity: 0.26; }
.atlas-ocean-engraving { fill: url('#atlas-sea-engraving'); }
.atlas-coastal-waters { pointer-events: none; }
.atlas-coastal-wash, .atlas-coastal-shallows, .atlas-coastal-edge { fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.atlas-coastal-wash { stroke: #b0c7ad; stroke-width: 26; stroke-opacity: 0.2; }
.atlas-coastal-shallows { stroke: #c0d0b8; stroke-width: 14; stroke-opacity: 0.3; }
.atlas-coastal-edge { stroke: #d8dfc5; stroke-width: 5; stroke-opacity: 0.38; }
.atlas-land { fill: url('#atlas-parchment'); stroke: #75634b; stroke-width: 1.3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.atlas-land.atlas-cache-land-outline { fill: none; }
.atlas-ground-engraving { fill: none; stroke: #73764f; stroke-width: 0.5; stroke-opacity: 0.19; stroke-linecap: round; }
.atlas-ground-engraving-1 { stroke: #9c825b; stroke-opacity: 0.23; }
/* The shape/marker and label colors indicate focus; no browser bounding box. */
.atlas-feature, .atlas-label-link { cursor: pointer; outline: none; }
.atlas-shape { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.atlas-territories .atlas-shape { fill: currentColor; fill-opacity: 0.6; stroke: #74604a; stroke-width: 1.4; stroke-dasharray: 5 3; }
.atlas-regions .atlas-shape { fill: currentColor; fill-opacity: 0.09; stroke: currentColor; stroke-width: 0.8; stroke-opacity: 0.24; stroke-dasharray: 3 6; }
.atlas-nature .atlas-shape { fill: currentColor; fill-opacity: 0.2; stroke-opacity: 0; stroke-width: 1; }
.atlas-mountain { --mountain-face: #e0cfaa; --mountain-edge: #6f5b42; --mountain-shade: #98805b; }
.atlas-mountain-foothill { fill: #8d7954; fill-opacity: 0.13; stroke: none; }
.atlas-mountain-contact { fill: #675a40; fill-opacity: 0.2; stroke: none; }
.atlas-mountain-body { fill: var(--mountain-face); stroke: var(--mountain-edge); stroke-width: 0.85; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.atlas-mountain-shadow { fill: var(--mountain-shade); stroke: none; pointer-events: none; }
.atlas-mountain-ridge { fill: none; stroke: var(--mountain-edge); stroke-width: 0.65; stroke-opacity: 0.7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.atlas-feature.atlas-mountain:is(.is-hovered, :focus-visible) { --mountain-face: #e6cc91; --mountain-edge: #80500e; --mountain-shade: #b09059; }
.atlas-feature.atlas-mountain.is-selected { --mountain-face: #cedee0; --mountain-edge: #1d4f70; --mountain-shade: #94adb5; }
.atlas-water .atlas-shape { stroke: #527c7b; stroke-width: 2.2; }
.atlas-lake .atlas-shape { fill: #99bdc2; fill-opacity: 0.88; stroke: #5d8187; stroke-width: 1.1; }
.atlas-lake-decoration { pointer-events: none; }
.atlas-lake-wash { stroke: none; }
.atlas-lake-shallows { fill: none; stroke: #cfddca; stroke-width: 5; stroke-opacity: 0.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.atlas-lake-inner-shore { fill: none; stroke: #e0e5d1; stroke-width: 1.8; stroke-opacity: 0.55; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.atlas-lake-ripple { fill: none; stroke: #507f8e; stroke-width: 0.6; stroke-opacity: 0.65; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.atlas-routes .atlas-shape { stroke: #8b6540; stroke-width: 2; }
.atlas-local .atlas-shape { stroke: #967855; stroke-width: 1.4; stroke-dasharray: 3 4; }
.atlas-marker { --atlas-town-wall: #e8d8af; --atlas-town-roof: #ab704a; --atlas-town-ink: #584531; --atlas-town-side: #baa682; --atlas-town-roof-side: #815035; fill: var(--atlas-town-wall); stroke: var(--atlas-town-ink); stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; }
.atlas-town { stroke-width: 0.7; }
.atlas-town-wall { fill: var(--atlas-town-wall); }
.atlas-town-roof { fill: var(--atlas-town-roof); }
.atlas-town-shade { fill: var(--atlas-town-ink); fill-opacity: 0.28; }
.atlas-town-wall.atlas-town-shade { fill: var(--atlas-town-side); fill-opacity: 1; }
.atlas-town-roof-shade { fill: var(--atlas-town-roof-side); }
.atlas-town-ground { fill: #857659; fill-opacity: 0.22; stroke: none; pointer-events: none; }
.atlas-town-opening { fill: var(--atlas-town-ink); stroke: none; }
.atlas-town-detail { fill: none; stroke-width: 0.5; }
.atlas-marker-halo { fill: #ffdc6e; fill-opacity: 0.32; stroke: #704816; stroke-width: 2; opacity: 0; pointer-events: none; }
.atlas-marker-core { fill: #f2ce69; stroke: none; }
.atlas-label-link { --atlas-label-ink: #403829; --atlas-label-halo: #ecdfc1; }
.atlas-regions.atlas-label-link { --atlas-label-ink: #746a53; --atlas-label-halo: #eee2c5; }
.atlas-label { fill: var(--atlas-label-ink); stroke: none; font-family: system-ui, sans-serif; font-weight: 600; font-style: normal; letter-spacing: normal; word-spacing: normal; }
.atlas-label-halo { fill: none; stroke: var(--atlas-label-halo); stroke-width: 0.16em; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.atlas-water.atlas-label-link { --atlas-label-ink: #245b70; --atlas-label-halo: #dae5df; }
.atlas-area-label { font-weight: 600; }
.atlas-territories :is(.atlas-area-label, .atlas-exterior-label) { font-weight: 600; }
.atlas-territory-labels { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.atlas-territory-labels[hidden] { display: none; }
.atlas-territory-labels button { display: flex; flex: 0 1 auto; max-width: 100%; align-items: center; gap: 7px; text-align: left; color: #e8d4a4; background: #292b26; border: 1px solid #71634a; font: 600 0.9rem/1.4 system-ui, sans-serif; padding: 7px 10px; }
.atlas-territory-labels span { overflow-wrap: anywhere; }
.atlas-territory-labels svg { flex-shrink: 0; }
.atlas-territory-labels button:is(.is-hovered, :focus-visible) { color: #ffe28b; border-color: #d4ae55; box-shadow: inset 0 0 0 1px #d4ae55; }
.atlas-territory-labels button.is-selected { color: #e0f3ff; border-color: #89b9cb; }
.atlas-line-label { font-weight: 500; }
.atlas-routes.atlas-label-link { --atlas-label-ink: #603d1f; }
.atlas-feature:is(.is-hovered, .is-selected, :focus-visible) .atlas-marker-halo { opacity: 1; }
.atlas-feature.is-selected .atlas-marker-halo { stroke: #1c4b68; fill: #bee4f6; }
.atlas-feature:is(.is-hovered, :focus-visible) .atlas-marker { --atlas-town-wall: #f0d69d; --atlas-town-roof: #ae7942; --atlas-town-ink: #624316; --atlas-town-side: #c4aa76; --atlas-town-roof-side: #805824; stroke-width: 1.3; }
.atlas-feature.is-selected .atlas-marker { --atlas-town-wall: #d5dfd5; --atlas-town-roof: #74969c; --atlas-town-ink: #244855; --atlas-town-side: #a8bab2; --atlas-town-roof-side: #536e78; stroke-width: 1.3; }
.atlas-feature:is(.is-hovered, .is-selected, :focus-visible) .atlas-town { stroke-width: 0.9; }
/* Shared town images replace only their original drawing, after every state has loaded. */
.atlas-town-cache-image { display: none; pointer-events: none; }
.atlas-marker.atlas-town-cache-ready > .atlas-town { display: none; }
.atlas-marker.atlas-town-cache-ready > .atlas-town-cache-normal { display: inline; }
.atlas-feature:is(.is-hovered, :focus-visible) .atlas-town-cache-ready > .atlas-town-cache-normal,
.atlas-feature.is-selected .atlas-town-cache-ready > .atlas-town-cache-normal { display: none; }
.atlas-feature:is(.is-hovered, :focus-visible) .atlas-town-cache-ready > .atlas-town-cache-hover { display: inline; }
.atlas-feature.is-selected .atlas-town-cache-ready > .atlas-town-cache-hover { display: none; }
.atlas-feature.is-selected .atlas-town-cache-ready > .atlas-town-cache-selected { display: inline; }
.atlas-feature:is(.is-hovered, :focus-visible) .atlas-shape { stroke: #83520a; stroke-opacity: 1; stroke-width: 4; filter: drop-shadow(0 0 2px #ffdf72); }
.atlas-feature.is-selected .atlas-shape { stroke: #1d4f70; stroke-opacity: 1; stroke-width: 4; }
.atlas-feature.atlas-regions:is(.is-hovered, :focus-visible) .atlas-shape { fill-opacity: 0.16; stroke-opacity: 0.6; stroke-width: 1.2; filter: none; }
.atlas-feature.atlas-regions.is-selected .atlas-shape { fill-opacity: 0.18; stroke-opacity: 0.7; stroke-width: 1.2; filter: none; }
.atlas-feature .atlas-maritime-shape { fill: #70adb9; fill-opacity: 0; stroke: none; pointer-events: visibleFill; }
.atlas-feature:is(.is-hovered, :focus-visible) .atlas-maritime-shape { fill-opacity: 0.27; stroke: none; filter: none; }
.atlas-feature.is-selected .atlas-maritime-shape { fill: #4c94b0; fill-opacity: 0.32; stroke: none; filter: none; }
.atlas-territories:is(.is-hovered, .is-selected) .atlas-shape { fill-opacity: 0.75; }
.atlas-nature:is(.is-hovered, .is-selected) .atlas-shape { fill-opacity: 0.32; }
.atlas-label-link:is(.is-hovered, :focus-visible) { --atlas-label-ink: #694000; --atlas-label-halo: #ffe28b; }
.atlas-label-link.is-selected { --atlas-label-ink: #183e57; --atlas-label-halo: #e0f3ff; }
.atlas-tooltip { position: absolute; pointer-events: none; box-sizing: border-box; width: max-content; max-width: min(520px, calc(100% - 16px)); overflow-wrap: anywhere; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: #14243bf5; color: var(--ink); font-size: 0.8rem; line-height: 1.5; box-shadow: 0 3px 15px #14243b33; }
.atlas-tooltip[hidden] { display: none; }
.atlas-compass { position: absolute; top: 15px; right: 16px; width: 54px; height: 66px; padding-top: 5px; text-align: center; color: #6d563a; pointer-events: none; font-family: Georgia, serif; font-weight: 700; font-size: 0.9rem; line-height: 1.3; background: #eadaba90; border: 1px solid #8b785277; border-radius: 50%; }
.atlas-map-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 10px 0; font-size: 0.72rem; color: var(--muted); }
.atlas-detail { margin-bottom: 20px; padding: 14px; border: 1px solid #675b46; border-radius: 5px; background: var(--surface); display: flex; flex-direction: column; align-items: start; gap: 12px; font-size: 0.9rem; overflow-wrap: anywhere; }
.atlas-detail h2 { font-size: 1.25rem; margin: 4px 0 8px; }
.atlas-detail p { margin: 0; line-height: 1.6; }
.atlas-detail a { color: var(--link); white-space: nowrap; }
.atlas-notice { padding: 40px; max-width: 800px; max-height: 100%; margin: auto; overflow: auto; }
.atlas-notice a { color: var(--link); }
@media (max-width: 850px) {
  .atlas-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 35%) minmax(0, 1fr); }
  .atlas-sidebar { border-right: 0; border-bottom: 1px solid var(--line); padding: 14px; }
  .atlas-results { max-height: 175px; }
  .atlas-map-panel { padding: 10px; }
}