/* The atlas and the planner window (atlas.js, outing.js). Parchment, brown ink and a red trail, as the route chart; the controls are
   large enough for a thumb and keep clear of a phone's edges. */
.atlas-host { position: absolute; inset: 0; z-index: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.atlas-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; outline: none; }
.atlas-svg:active { cursor: grabbing; }
.atlas-svg .ns { vector-effect: non-scaling-stroke; }
.a-land { fill: #ecdcb4; stroke: none; }
.a-coast { fill: none; stroke: #4a3420; stroke-width: 1.3; stroke-linejoin: round; }
.a-waterline { fill: none; stroke: #6f8a86; stroke-width: 1.4; stroke-opacity: 0.55; }
.a-waterline.wide { stroke-width: 6; stroke-opacity: 0.18; }
.a-road { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.a-road.streets { stroke: #b49a6c; stroke-width: 0.8; }
.a-road.local { stroke: #a58a5a; stroke-width: 1.1; }
.a-road.secondary { stroke: #8f7347; stroke-width: 1.5; }
.a-road.primary { stroke: #6e5232; stroke-width: 2; }
.a-road.open-edge { stroke: #4a3420; stroke-width: 3.6; }
.a-road.open { stroke: #ecdcb4; stroke-width: 1.8; }
.a-trail-halo { fill: none; stroke: #f5e7c6; stroke-width: 8; stroke-opacity: 0.85; stroke-linecap: round; stroke-linejoin: round; }
.a-trail-line { fill: none; stroke: #a3261b; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.a-trail-line.ahead { stroke-dasharray: 1 7; stroke-width: 3.6; opacity: 0.9; }
.a-trail-line.walked { stroke: #8a7a62; stroke-width: 2.4; opacity: 0.7; }
.a-trail-line.live { stroke-dasharray: 9 7; animation: a-march 0.9s linear infinite; }
@keyframes a-march { to { stroke-dashoffset: -16; } }
.a-name { fill: #3d2a18; font-family: Georgia, 'Times New Roman', serif; font-style: italic; paint-order: stroke; stroke: #ecdcb4; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.a-name.town { font-weight: 700; letter-spacing: 0.03em; fill: #5a4126; }
.a-name.quarter { font-style: normal; letter-spacing: 0.2em; fill: #7a6444; }
.a-glyph { fill: none; stroke: #4a3420; stroke-width: 1; pointer-events: none; }
.a-mark { cursor: pointer; outline: none; }
.a-mark .a-dot { fill: #a3261b; stroke: #f5e7c6; stroke-width: 2.4; }
.a-mark .a-num { fill: #fbf1d6; font: 700 13px Georgia, serif; pointer-events: none; }
.a-mark .a-sight { fill: #c9a24a; stroke: #4a3420; stroke-width: 1.4; }
.a-mark .a-start { fill: #f5e7c6; stroke: #1f4e79; stroke-width: 2.4; }
.a-mark .a-flag { fill: #c9a24a; stroke: #4a3420; stroke-width: 2; stroke-linejoin: round; }
.a-mark .a-pulse { fill: none; stroke: #a3261b; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.a-mark.next .a-pulse { animation: a-beacon 1.8s ease-out infinite; }
.a-mark.done .a-dot { fill: #5c6f4a; }
.a-mark.skipped { opacity: 0.45; }
.a-mark.start { pointer-events: none; }
.a-mark:focus-visible .a-dot, .a-mark:focus-visible .a-sight { stroke: #1f4e79; stroke-width: 3.5; }
@keyframes a-beacon { 0% { opacity: 0.9; transform: scale(0.7); } 100% { opacity: 0; transform: scale(2.2); } }
.a-me { pointer-events: none; }
.a-me-acc { fill: rgba(31, 78, 121, 0.14); stroke: rgba(31, 78, 121, 0.5); stroke-width: 1; }
.a-me-face { width: 48px; height: 48px; filter: drop-shadow(0 1px 3px rgba(40, 25, 10, 0.6)); }
.a-me-face .medallion { width: 48px; height: 48px; }
.a-grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.9; }
.a-edge { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(90, 60, 28, 0) 62%, rgba(90, 60, 28, 0.38) 100%); }
.a-me-dot { fill: #1f4e79; stroke: #f5e7c6; stroke-width: 3; }
.a-me-word { fill: #1f4e79; font: italic 700 12px Georgia, serif; paint-order: stroke; stroke: #ecdcb4; stroke-width: 3px; }

.atlas-scale { position: absolute; left: max(14px, env(safe-area-inset-left)); bottom: 10px; display: flex; flex-direction: column; gap: 3px; font: italic 600 12px Georgia, serif; color: #3d2a18; text-shadow: 0 0 3px #ecdcb4, 0 0 3px #ecdcb4; pointer-events: none; }
.atlas-scale span:first-child { display: block; height: 5px; border: 1.5px solid #4a3420; border-top: 0; }

.atlas-anchor { position: absolute; width: 1px; height: 1px; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .a-trail-line.live, .a-mark.next .a-pulse { animation: none; } }