/* Three gathering-guide route atlases. Uses the site's stone, edge, type and
   accent tokens; the lines are a skill progression, not an in-game map. */
.gather-route-fold { margin-block: var(--s-4); border: 1px solid var(--edge); box-shadow: inset 0 0 0 1px var(--edge-inner); background: var(--bg-2); }
.gather-route-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 60px; padding: var(--s-3); list-style: none; cursor: pointer; }
.gather-route-fold > summary::-webkit-details-marker { display: none; }
.gather-route-fold > summary h2 { margin: 0; color: var(--ink); font-size: clamp(1.25rem, 1.1rem + .65vw, 1.65rem); }
.gather-route-fold-cue { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; color: var(--accent-text); font: 600 .8rem/1.3 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; }
.gather-route-fold-open { display: none; }
.gather-route-fold[open] .gather-route-fold-open { display: inline; }
.gather-route-fold[open] .gather-route-fold-closed { display: none; }
.gather-route-fold-arrow { display: inline-block; font-size: 1.4rem; line-height: .7; transition: transform .18s ease; }
.gather-route-fold[open] .gather-route-fold-arrow { transform: rotate(180deg); }
.gather-route-fold[open] > summary { border-bottom: 1px solid var(--edge); }
.gather-route-fold > summary:hover { background: var(--panel-2); }
.gather-route-fold > summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.gather-route-fold-body { padding: 0 var(--s-3) var(--s-3); }
.gather-route-fold-body > p:first-child { margin-top: var(--s-3); }
.gather-route-fold-body .gather-atlas { margin-bottom: 0; }
.gather-atlas { display: grid; gap: var(--s-4); min-width: 0; margin-block: var(--s-4); }
.gather-stage-kicker { font: 600 .8rem/1.3 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.gather-stage { min-width: 0; padding: var(--s-3); border: 1px solid var(--edge); box-shadow: inset 0 0 0 1px var(--edge-inner); background: var(--bg-2); }
.gather-stage-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.gather-stage-index { display: grid; place-items: center; flex: 0 0 2.65rem; height: 2.65rem; border: 1px solid var(--edge-inner); background: var(--bg-3); color: var(--accent-text); font-size: 1.75rem; font-weight: 600; line-height: 1; }
.gather-stage-kicker { margin: 0 0 2px; }
.gather-stage h3 { margin: 0; color: var(--ink); font-size: clamp(1.08rem, 1rem + .35vw, 1.35rem); }
.gather-stage-action { margin: 0 0 var(--s-3); color: var(--ink-2); }
.gather-zone-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 8px; }
.gather-zone { min-width: 0; margin: 0; border: 1px solid var(--edge-inner); background: var(--bg-3); }
.gather-zone[open] { border-top: 2px solid var(--accent); }
.gather-zone summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 8px 12px; color: var(--ink); cursor: pointer; list-style: none; }
.gather-zone summary::-webkit-details-marker { display: none; }
.gather-zone summary::before { content: "+"; flex: 0 0 auto; width: 1rem; color: var(--accent-text); font: 600 1rem/1 var(--font-ui); }
.gather-zone[open] summary::before { content: "−"; }
.gather-zone-name { flex: 1; font-weight: 600; overflow-wrap: anywhere; }
.gather-faction { flex: 0 0 auto; font: 400 .78rem/1.3 var(--font-ui); color: var(--ink-2); }
.gather-zone p { margin: 0; padding: 0 12px 12px 36px; color: var(--ink-2); font-size: .92rem; line-height: 1.55; }
.gather-zone-map { min-width: 0; margin: 0 12px 12px; }
.gather-zone-map > a { display: block; border: 1px solid var(--edge-inner); background: var(--bg-2); }
.gather-zone-map picture { display: contents; }
.gather-zone-map img { display: block; width: 100%; height: auto; aspect-ratio: 1002 / 668; }
.gather-zone-map figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding-top: 7px; color: var(--ink-2); font: 400 .75rem/1.4 var(--font-ui); }
.gather-zone-map figcaption a { color: var(--accent-text); font-weight: 600; white-space: nowrap; }
.gather-zone summary:hover { background: var(--panel-2); }
.gather-zone summary:focus-visible, .gather-atlas a:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.gather-stage-move { margin: var(--s-3) 0 0; padding-top: var(--s-2); border-top: 1px solid var(--hairline); color: var(--ink-2); font-size: .9rem; }
.gather-stage-move strong { color: var(--accent-text); }
@media (max-width: 25rem) { .gather-stage { padding: var(--s-2); } .gather-faction { font-size: .72rem; } .gather-route-fold > summary { padding: var(--s-2); } .gather-route-fold-cue { font-size: .72rem; } .gather-route-fold-body { padding-inline: var(--s-2); } }
@media (prefers-reduced-motion: reduce) { .gather-route-fold-arrow { transition: none; } }