.skeleton-map,.map-load-message{display:none}
.sk-enabled [data-preview=loading] .skeleton-map{display:grid;position:absolute;inset:0;overflow:hidden;place-items:center;background:var(--bg);pointer-events:none}
.skeleton-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;opacity:.6;transform:scale(1.02)}
.skeleton-grid i,.skeleton-caption span{display:block;background:color-mix(in srgb,var(--muted) 12%,var(--bg));border-radius:12px;position:relative;overflow:hidden}
.skeleton-grid i::after,.skeleton-caption span::after,.flag-placeholder::after,.sk-controls .zoom::after,.sk-controls .comparison::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,var(--cyan) 16%,transparent) 50%,transparent 70%);transform:translateX(-100%);animation:sk-sweep 1.8s ease-in-out infinite}
.skeleton-caption{position:relative;width:min(260px,55%);display:grid;gap:12px}.skeleton-caption span{height:14px}.skeleton-caption span:last-child{width:65%;height:10px}
.sk-enabled [data-preview=loading] .map-load-message,.sk-enabled [data-preview=error] .map-load-message{display:flex;position:absolute;top:58%;left:50%;transform:translate(-50%,-50%);gap:12px;align-items:center;padding:12px 18px;font-size:13px;max-width:85%;z-index:2}
#retry-map{background:var(--accent);color:var(--action-ink);border-radius:10px;min-height:44px;padding:8px 14px}
.flag-placeholder{position:relative;width:22px;height:15px;display:inline-flex;flex-shrink:0;overflow:hidden;border-radius:2px;background:var(--solid)}
.flag-placeholder[data-loading=false]{background:none}.flag-placeholder[data-loading=false]::after{display:none}.flag-placeholder[data-loading=true] img{opacity:0}
.sk-controls .zoom,.sk-controls .comparison{overflow:hidden;pointer-events:none}.sk-controls .zoom>* ,.sk-controls .comparison>*{visibility:hidden}
#viewer[data-detail-state=loading]~.map-meta #resolution::after{content:"";display:block;margin-top:6px;height:4px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);background-size:200% 100%;animation:sk-detail 1.5s ease-in-out infinite}
@keyframes sk-sweep{to{transform:translateX(100%)}}
@keyframes sk-detail{from{background-position:200% 0}to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.skeleton-grid i::after,.skeleton-caption span::after,.flag-placeholder::after,.sk-controls .zoom::after,.sk-controls .comparison::after,#viewer[data-detail-state=loading]~.map-meta #resolution::after{animation:none;transform:none}}
@media(forced-colors:active){.skeleton-grid i,.skeleton-caption span{background:Canvas;border:1px solid GrayText}}

