/* Safari 12 / iOS 12.5 — additive fallbacks only.
   Applied when html has ds-no-flex-gap / ds-no-has / ds-no-aspect-ratio / ds-no-fs-api
   or body has ds-has-home-auth / ds-has-bottom-dash-nav (CFML/JS markers).
   Modern browsers ignore these rules (no legacy classes). */

/* ---- Fixed header / bottom nav clearance (:has polyfill) ---- */
body.ds-has-home-auth .wrap {
    max-width: var(--ds-user-content-max, 1160px);
    margin-left: auto;
    margin-right: auto;
    padding-top: var(--ds-home-auth-pad-top, 100px) !important;
}
body.ds-has-user-topbar .wrap {
    max-width: var(--ds-user-content-max, 1160px);
    margin-left: auto;
    margin-right: auto;
    padding-top: var(--ds-user-topbar-pad-top, 92px) !important;
}
body.ds-has-share-auth .wrap {
    padding-top: var(--ds-home-auth-pad-top, 100px) !important;
}

@media (max-width: 991.98px) {
    html.ds-has-auth-blurb {
        --ds-home-auth-pad-top: 140px;
    }
    body.ds-has-bottom-dash-nav .wrap {
        padding-bottom: calc(var(--ds-dash-nav-height-mobile, 64px) + 20px + env(safe-area-inset-bottom, 0)) !important;
    }
    /* Share song page: promo is outside .wrap — keep player→promo tight in portrait */
    html.ds-share-song-page body.ds-has-bottom-dash-nav .wrap,
    html.ds-share-song-page .wrap {
        padding-bottom: 16px !important;
    }
    body.ds-has-bottom-dash-nav .ds-site-footer {
        margin-bottom: calc(var(--ds-dash-nav-height-mobile, 64px) + env(safe-area-inset-bottom, 0));
    }
    html.ds-has-bottom-dash-nav {
        scroll-padding-bottom: calc(var(--ds-dash-nav-height-mobile, 64px) + 20px + env(safe-area-inset-bottom, 0));
    }
}

/* ---- Flex gap fallbacks (Safari 12 ignores flex gap; grid gap is fine) ---- */
@media (min-width: 992px) {
    html.ds-no-flex-gap .home-auth-bar-inner > * + * {
        margin-left: 20px;
    }
}
html.ds-no-flex-gap .home-auth-actions > * + * {
    margin-left: 12px;
}
html.ds-no-flex-gap .home-logo-block > * + * {
    margin-top: 3px;
    margin-left: 0;
}
html.ds-no-flex-gap .ds-burger-topbar > * + *,
html.ds-no-flex-gap header.ds-topbar.ds-enduser-topbar.ds-burger-topbar .ds-topbar-inner > * + * {
    margin-left: 16px;
}
html.ds-no-flex-gap .ds-burger-panel__list > li + li {
    margin-top: 12px;
}
html.ds-no-flex-gap .ds-burger-panel__list > .ds-burger-panel__divider {
    margin-top: 12px;
    margin-bottom: 4px;
}
html.ds-no-flex-gap .ds-burger-panel__list a > .ds-burger-panel__icon + .ds-burger-panel__label,
html.ds-no-flex-gap .ds-burger-panel__list a > * + * {
    margin-left: 12px;
}
html.ds-no-flex-gap .ds-enduser-dash-nav--inline .ds-enduser-dash-nav__inner > * + * {
    margin-left: 14px;
}
html.ds-no-flex-gap .ds-enduser-dash-nav--inline .ds-enduser-dash-nav__link > * + * {
    margin-left: 5px;
}
html.ds-no-flex-gap .home-auth-bar .home-auth-actions > * + * {
    margin-left: 12px;
}
@media (min-width: 992px) {
    html.ds-no-flex-gap .home-auth-bar .home-auth-actions > * + * {
        margin-left: 20px;
    }
}
html.ds-no-flex-gap .ds-enduser-dash-nav--bottom .ds-enduser-dash-nav__inner > * + * {
    margin-left: 6px;
}
html.ds-no-flex-gap .ds-enduser-dash-nav--bottom .ds-enduser-dash-nav__link > * + * {
    margin-top: 4px;
    margin-left: 0;
}
html.ds-no-flex-gap .home-juke-wrap .player .player-times-fs > * + *,
html.ds-no-flex-gap .ds-jukebox-section .home-juke-wrap .player .player-times-fs > * + *,
html.ds-no-flex-gap .share-juke-section .home-juke-wrap .player .player-times-fs > * + * {
    margin-left: 8px;
}
html.ds-no-flex-gap .ds-juke-controls > * + * {
    margin-left: 14px;
}
html.ds-no-flex-gap .ds-jukebox-section .ds-juke-controls > .player + .ds-track-share-row {
    margin-left: 14px;
}
html.ds-no-flex-gap .ds-track-share-btns > * + *,
html.ds-no-flex-gap .ds-track-share-row > * + * {
    margin-left: 10px;
}
html.ds-no-flex-gap .ds-track-share-row .ds-share-btn > * + *,
html.ds-no-flex-gap .ds-track-share-row .ds-share-btn svg + span {
    margin-left: 8px;
}
html.ds-no-flex-gap .wrap .refer-invite-share-row.ds-track-share-row > * + * {
    margin-left: 10px;
}
html.ds-no-flex-gap .wrap .refer-invite-share-row .ds-share-btn > * + * {
    margin-left: 8px;
}
html.ds-no-flex-gap .cta-row > * + * {
    margin-left: 12px;
}
html.ds-no-flex-gap .feature-step-head > * + * {
    margin-left: 10px;
}
/* Chip wrap: horizontal + row spacing ( > * + * alone fails on new rows ) */
html.ds-no-flex-gap .chips {
    gap: 0;
}
html.ds-no-flex-gap .chips > * {
    margin: 0 10px 10px 0;
}
html.ds-no-flex-gap .share-juke-section .share-juke-controls .share-actions,
html.ds-no-flex-gap .share-actions {
    gap: 0;
}
html.ds-no-flex-gap .share-actions .share-btn {
    margin-right: 10px;
}
html.ds-no-flex-gap .share-actions .share-btn:last-child {
    margin-right: 0;
}
html.ds-no-flex-gap .share-juke-section .share-juke-controls .share-actions {
    margin-top: 12px;
}
@media (min-width: 1025px) {
    html.ds-no-flex-gap .share-juke-section .share-juke-controls .share-actions {
        margin-top: 0;
        margin-left: auto;
    }
}
html.ds-no-flex-gap .footer-cta > * + * {
    margin-left: 0;
    margin-top: 22px;
}
html.ds-no-flex-gap .ds-topbar-end > * + * {
    margin-left: 10px;
}
html.ds-no-flex-gap .wrap a.btn.cta-btn.ds-cta-btn--icon .ds-cta-btn__icon {
    margin-right: 8px;
}
html.ds-no-flex-gap .unlock-row > * + * {
    margin-left: 10px;
}

/* Mobile stacked juke controls: column gap */
@media (max-width: 767.98px) {
    html.ds-no-flex-gap .ds-jukebox-section .ds-juke-top > .ds-juke-controls > * + * {
        margin-left: 0;
        margin-top: 8px;
    }
    html.ds-no-flex-gap .ds-jukebox-section .ds-juke-controls .ds-track-share-row.is-visible > * + *,
    html.ds-no-flex-gap .ds-jukebox-section .ds-track-share-btns > * + * {
        margin-left: 10px;
        margin-top: 0;
    }
}
@media (max-width: 1100px) {
    html.ds-no-flex-gap .ds-jukebox-section .ds-juke-controls > .player + .ds-track-share-row {
        margin-left: 0;
        margin-top: 10px;
    }
}

/* ---- aspect-ratio polyfill for jukebox covers ---- */
html.ds-no-aspect-ratio .jukebox-photo-surface,
html.ds-no-aspect-ratio .ds-jukebox-section .jukebox-photo-surface,
html.ds-no-aspect-ratio .share-juke-section .jukebox-photo-surface,
html.ds-no-aspect-ratio .jukebox-section .jukebox-photo-surface {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
}
html.ds-no-aspect-ratio .jukebox-photo-surface picture,
html.ds-no-aspect-ratio .ds-jukebox-section .jukebox-photo-surface picture,
html.ds-no-aspect-ratio .share-juke-section .jukebox-photo-surface picture,
html.ds-no-aspect-ratio .jukebox-section .jukebox-photo-surface picture {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
}
html.ds-no-aspect-ratio .ds-jukebox-section .jukebox-photo-surface img.juke-photo,
html.ds-no-aspect-ratio .share-juke-section .jukebox-photo-surface img.juke-photo,
html.ds-no-aspect-ratio .jukebox-section .jukebox-photo-surface img.juke-photo,
html.ds-no-aspect-ratio .jukebox-photo-surface img,
html.ds-no-aspect-ratio .ds-empty-listen__figure img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
html.ds-no-aspect-ratio .ds-empty-listen__figure {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
}
html.ds-no-aspect-ratio .jukebox-visual {
    /* width from layout; height follows surface padding-box */
    height: auto !important;
}

html.ds-no-aspect-ratio .story picture {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}
html.ds-no-aspect-ratio .story picture img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 0;
}
html.ds-no-aspect-ratio .ds-tile-media-slot {
    height: 0;
    padding-bottom: 100%;
}
html.ds-no-aspect-ratio .ds-tile-media-slot picture,
html.ds-no-aspect-ratio .ds-tile-media {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
html.ds-no-fs-api .btn-fs,
html.ds-no-fs-api .home-juke-wrap .player .btn-fs,
html.ds-no-fs-api .ds-jukebox-section .home-juke-wrap .player .btn-fs {
    display: none !important;
}

html.ds-no-flex-gap .ds-thumb-actions > .ds-thumb-btn + .ds-thumb-btn,
html.ds-no-flex-gap .ds-juke-rate-card .ds-thumb-actions > .ds-thumb-btn + .ds-thumb-btn {
    margin-left: 22px;
}

/* Spectrum analyser off on weak Safari 12 / iOS ≤12 (keeps audio smooth). */
html.ds-no-spectrum .juke-spectrum-strip-wrap,
html.ds-no-spectrum canvas.juke-spectrum-strip-canvas,
html.ds-no-spectrum canvas.juke-spectrum-canvas {
    display: none !important;
}

/* Report / contact file picker — Safari 12 needs webkit pseudo + appearance reset */
html.ds-no-flex-gap input[type="file"],
html.ds-no-spectrum input[type="file"] {
    min-height: 48px;
    padding: 8px !important;
}
html.ds-no-flex-gap input[type="file"]::-webkit-file-upload-button,
html.ds-no-spectrum input[type="file"]::-webkit-file-upload-button {
    -webkit-appearance: none;
    appearance: none;
    margin-right: 10px;
    padding: 10px 16px;
    min-height: 40px;
    border-radius: 8px;
    border: 1px solid rgba(154, 171, 222, 0.38);
    background: #212946;
    color: #eef3ff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}