/* /map: loaded only on that page (and by the map share card). */
.map-page { max-width: 1328px; margin: 0 auto; padding: 24px var(--gutter) 72px; }
.map-page .head { gap: 20px; }
.map-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px; gap: 4px; }
.seg button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: inherit; font-size: 15px; cursor: pointer; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--text); color: var(--ink); }
.replay { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--text-2); font: inherit; font-size: 14px; cursor: pointer; }
.replay:hover { border-color: var(--text-3); color: var(--text); }
.map-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; padding-top: 28px; align-items: start; }
@media (max-width: 960px) { .map-grid { grid-template-columns: 1fr; gap: 28px; } }
.map-stage[hidden], [data-panel][hidden] { display: none; }
.map-svg { width: 100%; height: auto; display: block; }

/* States and countries */
.st, .co { stroke: var(--ink); stroke-width: .75; stroke-linejoin: round; transition: fill .15s ease; }
.st.n, .co.n { fill: #222328; }
.st.v, .co.v { fill: rgba(185, 167, 242, .34); }
.co.home { fill: #3A3B42; }
.st.v:hover, .co.v:hover { fill: rgba(185, 167, 242, .5); }
.dot-c { fill: var(--violet); stroke: var(--ink); stroke-width: 1.5; }

/* Routes */
.arc { fill: none; stroke-linecap: round; stroke-width: 1.8; stroke-dasharray: 1; stroke-dashoffset: 0; pointer-events: none; }
.arc.chain { stroke: var(--accent); opacity: .9; }
.arc.spoke { stroke: var(--teal); opacity: .85; }

/* Pins */
.pin { cursor: pointer; outline: none; transform-box: fill-box; transform-origin: center; }
.pin .hit { fill: transparent; }
.pin .dot { stroke: var(--ink); stroke-width: 2; }
.pin-home .dot { fill: var(--text); }
.pin-stint .dot { fill: var(--ink); stroke: var(--teal); stroke-width: 3.2; }
.pin .ring { fill: none; stroke: var(--text-3); stroke-width: 1.4; opacity: .85; }
.pin-stint .ring { stroke: var(--teal); }
.pin .sel { fill: none; stroke: var(--accent); stroke-width: 2.6; opacity: 0; }
.pin:hover .sel, .pin:focus-visible .sel, .pin.on .sel { opacity: 1; }
.pin .label { font: 500 15px var(--font-body); fill: var(--text); paint-order: stroke; stroke: var(--ink); stroke-width: 5px; stroke-linejoin: round; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.pin:hover .label, .pin:focus-visible .label, .pin.on .label, .pin.hub .label { opacity: 1; }

/* The one-time line draw: chain stop by stop, then the commutes fan out from Columbus. */
.map-us.play .arc { animation: draw .55s ease-out var(--d) backwards; }
.map-us.play .pin { animation: pop .4s ease-out var(--d) backwards; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }

/* Legend */
.legend { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 18px 0 0; margin: 0; list-style: none; font-size: 13px; color: var(--text-3); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.legend i { display: inline-block; flex: none; }
.lg-home { width: 12px; height: 12px; border-radius: 50%; background: var(--text); }
.lg-stint { width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--teal); }
.lg-visit { width: 14px; height: 14px; border-radius: 3px; background: rgba(185, 167, 242, .45); }
.lg-not { width: 14px; height: 14px; border-radius: 3px; background: #222328; border: 1px solid var(--line-strong); }
.lg-chain, .lg-spoke { width: 22px; height: 0; border-top: 2px solid var(--accent); }
.lg-spoke { border-color: var(--teal); }
.lg-us { width: 14px; height: 14px; border-radius: 3px; background: #3A3B42; }
.lg-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--violet); }
.togo { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* List */
.map-list h2 { margin: 0 0 12px; font-size: 13px; color: var(--muted); font-weight: 400; }
.map-list ol, .map-list ul { list-style: none; margin: 0; padding: 0; }
.stops { display: grid; gap: 8px; max-height: 640px; overflow: auto; padding-right: 4px; }
@media (max-width: 960px) { .stops { max-height: none; } }
.stop { width: 100%; display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.stop:hover { border-color: #45464C; }
.stop.on { border-color: var(--accent); }
.stop .n { font-family: var(--font-mono); font-size: 13px; color: var(--muted); padding-top: 2px; }
.stop strong { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.stop .meta { display: block; margin-top: 3px; font-size: 12px; color: var(--teal); }
.stop .meta.lived { color: var(--text-3); }
.stop .det { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--text-3); }
.countries { display: grid; gap: 8px; }
.countries li { padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-size: 15px; }
.countries li.terr { color: var(--text-3); font-size: 14px; background: transparent; }
.summary { margin: 0 0 16px; font-size: 15px; color: var(--text-2); }
.summary b { font-family: var(--font-display); font-weight: 600; color: var(--text); }