/* Shared visual navigation for all seven detailed pain-location maps. */
#atlas-root .finder-detail-modern { display: grid; grid-template-columns: minmax(0,1fr); align-items: start; }
#atlas-root .map-panel:has(.finder-detail-modern) { overflow: visible; }
#atlas-root .finder-detail-viewer { min-width: 0; padding: 18px 14px 0; }
#atlas-root .finder-detail-gallery[hidden], #atlas-root .finder-detail-expanded[hidden] { display: none; }
#atlas-root .finder-detail-gallery-intro { margin: 0 0 12px; color: #cae6f4; font-size: 13px; line-height: 1.6; }
#atlas-root .finder-detail-thumbnails { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
#atlas-root .finder-detail-thumbnail { display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; border: 2px solid #dce6ec; border-radius: 14px; background: #fff; color: #164b60; cursor: pointer; font: inherit; text-align: left; transition: border-color .15s, box-shadow .15s; }
#atlas-root .finder-detail-thumbnail:is(:hover,.is-preview) { border-color: #63d3eb; box-shadow: 0 0 0 2px rgba(99,211,235,.2); }
#atlas-root .finder-detail-thumbnail-art { display: block; padding: 12px 8px 8px; }
#atlas-root .finder-detail-thumbnail-art>svg { display: block; width: 100%; height: 162px; overflow: hidden; }
#atlas-root .finder-detail-thumbnail-brand { display: flex; justify-content: flex-end; padding-top: 8px; }
#atlas-root .finder-detail-thumbnail .finder-detail-brand { width: 78px; max-width: 100%; }
#atlas-root .finder-detail-thumbnail-label { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 5px; min-height: 48px; width: 100%; padding: 10px; border-top: 1px solid #e0e9ef; background: #edf4f8; font-size: 12px; font-weight: 650; line-height: 1.4; }
#atlas-root .finder-detail-thumbnail-label>svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
#atlas-root .finder-detail-back { min-height: 44px; margin: 0 0 10px; padding: 8px 13px; border: 1px solid #395b71; border-radius: 10px; background: #132b3b; color: #cae6f4; font: inherit; font-size: 12px; cursor: pointer; }
#atlas-root .finder-detail-back:hover { border-color: #63d3eb; background: #204b60; }
#atlas-root :is(.finder-detail-thumbnail,.finder-detail-back,.finder-location-button):focus-visible { outline: 3px solid #8be3fa; outline-offset: 3px; }
#atlas-root .finder-detail-canvas { overflow: hidden; border: 1px solid #dde7ed; border-radius: 14px; background: #fff; }
#atlas-root .finder-detail-figure { margin: 0; padding: 14px 10px 10px; background: #fff; }
#atlas-root .finder-detail-figure[hidden] { display: none; }
#atlas-root .finder-detail-figure figcaption { color: #526579; text-align: center; margin: 0 0 10px; }
#atlas-root .finder-detail-figure figcaption>span { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
#atlas-root .finder-detail-figure figcaption>strong { display: block; min-height: 2.7em; margin: 6px auto 0; max-width: 28ch; color: #16576a; font-size: 14px; line-height: 1.35; font-weight: 650; }
#atlas-root .finder-detail-modern .finder-detail-svg { display: block; width: 100%; height: auto; max-height: 520px; margin: auto; overflow: hidden; }
#atlas-root .finder-detail-hit .finder-location-shape { fill: rgba(0,153,179,.045); stroke: rgba(12,117,141,.32); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: fill; transition: fill .15s, stroke .15s; }
#atlas-root .finder-detail-hit:is(:hover,.is-preview,.is-active) .finder-location-shape { fill: rgba(0,163,186,.3); stroke: #087d94; stroke-width: 1.8; }
#atlas-root .finder-location-button.is-preview { border-color: #61cdea; background: rgba(0,184,238,.15); color: #b9f2ff; }
#atlas-root .finder-detail-modern .finder-location-button small { display: block; color: #a1bbc9; font-size: 10px; line-height: 1.5; margin-top: 3px; }
#atlas-root .finder-detail-brand-row { display: flex; justify-content: flex-end; padding: 14px 2px 0; }
#atlas-root .finder-detail-brand { display: inline-block; width: 126px; aspect-ratio: 1600/403; position: relative; }
#atlas-root .finder-detail-brand img { display: block; width: 100%; height: 100%; }
#atlas-root .finder-detail-brand>span { position: absolute; inset: 0; background: #111; -webkit-mask: url('/logo.png') center/100% 100% no-repeat; mask: url('/logo.png') center/100% 100% no-repeat; clip-path: inset(0 0 0 25%); }
#atlas-root .finder-detail-help { color: #a9c3d4; font-size: 11px; line-height: 1.7; margin: 12px 2px 4px; }
#atlas-root .finder-view-detail:has(.finder-instruction) .finder-detail-modern { grid-template-columns: minmax(0,1fr) minmax(215px,.85fr); }
#atlas-root .finder-detail-modern .finder-location-list { grid-template-columns: 1fr; }
@media (min-width: 621px) {
 #atlas-root .finder-view-detail:has(.finder-instruction) .finder-detail-viewer { position: sticky; top: 106px; }
 #atlas-root .finder-detail-modern .finder-detail-svg { max-height: min(520px,max(280px,calc(100svh - 335px))); }
}
@media (max-width: 620px) {
 #atlas-root .finder-view-detail:has(.finder-instruction) .finder-detail-modern { grid-template-columns: minmax(0,1fr); }
 #atlas-root .finder-detail-thumbnails { gap: 10px; }
 #atlas-root .finder-detail-thumbnail-art>svg { height: 145px; }
 #atlas-root .finder-detail-viewer { padding: 14px 12px 0; }
 #atlas-root .finder-detail-modern .finder-detail-svg { max-height: 460px; }
 #atlas-root .finder-detail-modern .finder-location-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
 #atlas-root .finder-detail-modern .finder-location-button { font-size: 12px; }
}
@media (max-width: 360px) { #atlas-root .finder-detail-modern .finder-location-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { #atlas-root .finder-detail-hit .finder-location-shape, #atlas-root .finder-detail-thumbnail { transition: none; } }