/* The view from here (/gifts/skyline/): on top of the shared maker look
   (/gifts/globes/maker.css). The skyline picture sits above the 3D view. */

.sk .sk-pano { position: relative; margin: 0 10px 8px; border-radius: 10px; overflow: hidden; background: #151820; flex: none; }
.sk #skPano { display: block; width: 100%; height: 132px; cursor: default; }
.sk.is-strip #skPano { cursor: crosshair; }
.sk .sk-pano-title {
    position: absolute; left: 10px; top: 7px; margin: 0; pointer-events: none;
    font-size: 0.74rem; color: rgba(236, 238, 233, 0.6); letter-spacing: 0.01em;
}
.sk .wm-seg button .bx { vertical-align: -2px; margin-right: 2px; }
.sk .wm-seg button:disabled { opacity: 0.35; cursor: default; }
.sk .sk-chips-tight { margin-top: 8px; }
.sk .sk-chips-tight .wm-chip { padding: 5px 10px; font-size: 0.78rem; }
.sk .sk-mapwrap { max-width: none; }
.sk .sk-mapwrap .wm-map { aspect-ratio: 4 / 3; cursor: crosshair; }
.sk .sk-peaks { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow: auto; }
.sk .sk-peaks li { display: flex; justify-content: space-between; gap: 10px; font-size: 0.82rem; padding: 3px 0; border-bottom: 1px solid var(--rule); }
.sk .sk-peaks li:last-child { border-bottom: 0; }
.sk .sk-peaks strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk .sk-peaks span { color: var(--muted); white-space: nowrap; }
.sk .sk-peaks .sk-peaks-none { color: var(--muted); font-size: 0.78rem; border: 0; display: block; }
.sk .wm-colors { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 900px) {
    .sk #skPano { height: 108px; }
}