.hppn-artist-skeleton { display: none; }
.hppn-mobile-notice {
    position: fixed;
    z-index: 10000;
    bottom: calc(var(--hppn-keyboard-inset, 0px) + env(safe-area-inset-bottom, 0px) + 20px);
    left: max(16px, env(safe-area-inset-left, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    width: fit-content;
    margin-inline: auto;
    padding: 12px 18px;
    border-radius: 16px;
    background: #202c29;
    color: #fffdf3;
    font: 600 14px/1.4 var(--font-sans, sans-serif);
    pointer-events: none;
}
.hppn-mobile-notice[hidden] { display: none; }
@media (max-width: 767px) {
    /* Keep transient UI inside the visible area when the keyboard opens. */
    .hppn-global-search[open] {
        top: var(--hppn-visible-top, 0px);
        bottom: auto;
        height: var(--hppn-visible-height, 100dvh);
        max-height: var(--hppn-visible-height, 100dvh);
        display: flex;
        flex-direction: column;
    }
    .hppn-global-search-head, .hppn-global-search-field { flex-shrink: 0; }
    .hppn-global-search[open] .hppn-global-search-results {
        min-height: 0;
        flex: 1;
        max-height: none;
        padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
        scroll-padding-bottom: 20px;
    }
    .hppn-mobile-filters[open] {
        max-height: calc(var(--hppn-visible-height, 100dvh) - env(safe-area-inset-top, 0px) - 12px);
        overflow-y: auto;
        padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
    }
    .page-search .now-playing-search-results {
        max-height: min(360px, calc(var(--hppn-visible-height, 100dvh) - 120px));
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .page-search .now-playing-scroll-wrapper {
        scroll-padding-block: calc(env(safe-area-inset-top, 0px) + 16px) calc(env(safe-area-inset-bottom, 0px) + 24px);
        padding-left: max(18px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(18px, env(safe-area-inset-right, 0px)) !important;
    }
    html body.hppn-home-map-page .hppn-map-card-slot {
        --hppn-sheet-available-height: calc(var(--hppn-visible-height, 100dvh) - var(--hppn-mobile-controls-top, 6px) - var(--mobile-install-banner-h, 0px) - 64px);
    }
    body.hppn-home-map-page .hppn-map-card {
        padding-left: max(10px, env(safe-area-inset-left, 0px));
        padding-right: max(10px, env(safe-area-inset-right, 0px));
    }
    body.hppn-home-map-page :is(.hppn-map-card-content, .hppn-map-list-panel),
    .page-search .now-playing-scroll-wrapper { -webkit-overflow-scrolling: touch; }
    body.hppn-home-map-page .hppn-sheet-handle { min-height: 44px; touch-action: none; }
    body.hppn-home-map-page .hppn-map-card-content { touch-action: pan-y; }
    :is(body.hppn-home-map-page, body.page-search) :is(button, [role="button"], .hppn-map-primary-btn, .now-playing-back-btn) {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        transition: scale 100ms ease-out, opacity 100ms ease-out;
    }
    :is(body.hppn-home-map-page, body.page-search) :is(button, [role="button"]):active:not(:disabled):not([aria-disabled="true"]) {
        scale: .96;
        opacity: .82;
    }
    body.page-search .now-playing-controls .control-btn,
    body.page-search .similar-artist-save-btn,
    :is(.hppn-global-search-head, .hppn-global-search-field, .now-playing-search-bar) button {
        min-width: 44px;
        min-height: 44px;
    }
    .page-search .now-playing-overlay[aria-busy="true"]::after {
        content: 'Finding artist…';
        position: fixed;
        left: 50%;
        top: calc(env(safe-area-inset-top, 0px) + 8px);
        translate: -50% 0;
        padding: 8px 14px;
        border-radius: 999px;
        background: var(--bg, #fffdf3);
        color: var(--ink, #202c29);
        font: 700 12px/1.3 var(--font-sans, sans-serif);
        pointer-events: none;
        z-index: 20;
    }
    .page-search .search-overlay.initial-artist-loading .search-initial-loading { display: none; }
    .page-search .search-overlay.initial-artist-loading .hppn-artist-skeleton { display: block; }
    .hppn-artist-skeleton { padding: calc(env(safe-area-inset-top, 0px) + 60px) 24px 24px; }
    .hppn-artist-skeleton-art { width: min(260px, 70vw); aspect-ratio: 1; margin: 24px auto; border-radius: 16px; }
    .hppn-artist-skeleton-line { height: 20px; width: 70%; margin: 16px auto; border-radius: 6px; }
    .hppn-artist-skeleton-line:last-child { width: 45%; }
    .hppn-artist-skeleton :is(.hppn-artist-skeleton-art, .hppn-artist-skeleton-line) {
        background: linear-gradient(100deg, #202c2910 20%, #202c2920 50%, #202c2910 80%);
        background-size: 200% 100%;
        animation: hppn-skeleton 1.2s ease-in-out infinite;
    }
}
@keyframes hppn-skeleton { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
    :is(body.hppn-home-map-page, body.page-search) :is(button, [role="button"]) { transition: none; }
    :is(body.hppn-home-map-page, body.page-search) :is(button, [role="button"]):active { scale: 1 !important; }
    .hppn-artist-skeleton :is(.hppn-artist-skeleton-art, .hppn-artist-skeleton-line) { animation: none; }
}