/* Every popup starts at the same screen height, regardless of its content size.
   The same placement also applies to the native, no-script fallback surfaces. */
:root {
    --popup-screen-top: max(1rem, env(safe-area-inset-top));
    --popup-screen-bottom: max(1rem, env(safe-area-inset-bottom));
    --popup-screen-height: calc(100dvh - var(--popup-screen-top) - var(--popup-screen-bottom));
}

:is(.card-actions-dialog, #deck-search-dialog, .popover-card, .deck-price-info) {
    position: fixed;
    inset: var(--popup-screen-top) 0 auto;
    margin: 0 auto;
    max-height: var(--popup-screen-height);
    max-block-size: var(--popup-screen-height);
}

/* Price information follows the same popup position instead of following the
   price label as the page scrolls. */
.deck-price-info[data-price-info-positioned] {
    inset: var(--popup-screen-top) 0 auto;
    margin: 0 auto;
    width: min(28rem, calc(100vw - 2rem));
    max-height: var(--popup-screen-height);
}

.popover-card:popover-open { animation: none; }
.popover-card.popover-card-fixed-header { overflow: clip; }

/* The compact price view also keeps its heading visible on short screens. */
.deck-price-info { padding: 0; }
.deck-price-info-heading {
    position: sticky;
    top: 0;
    z-index: 1;
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
    align-items: center;
    gap: .6rem;
    margin-bottom: 0;
    padding: .7rem 1rem;
    border-bottom: 2px solid var(--line-strong);
    background: var(--surface);
}
.deck-price-info-heading h2 {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.35;
}
.deck-price-info-heading .popup-close-button { grid-column: 3; grid-row: 1; }
.deck-price-info > :not(.deck-price-info-heading) { margin-inline: 1.25rem; }
.deck-price-info > :last-child { margin-bottom: 1.15rem; }

/* One native modal owns the backdrop and focus while its active pane changes. */
#shared-popup-shell {
    position: fixed;
    inset: var(--popup-screen-top) 0 auto;
    width: min(30rem, calc(100vw - 2rem));
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: var(--popup-screen-height);
    max-block-size: var(--popup-screen-height);
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text, #f5f7fa);
    box-shadow: none;
    overflow: visible;
    outline: none;
}

#shared-popup-shell::backdrop { background: #12151a6b; }
#shared-popup-shell[data-popup-kind="card"] { width: min(46rem, calc(100vw - 1.25rem)); }
#shared-popup-shell[data-popup-kind="search"] { width: min(72rem, calc(100vw - 2rem)); }
#shared-popup-shell[data-popup-kind="price"] { width: min(28rem, calc(100vw - 2rem)); }

#shared-popup-shell > [data-popup-pane] {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    max-height: var(--popup-screen-height);
    max-block-size: var(--popup-screen-height);
    animation: none;
    outline: none;
}

#shared-popup-shell > :is(.card-actions-dialog, .popover-card-fixed-header)[data-popup-pane] {
    display: flex;
    flex-direction: column;
    /* Only the body scrolls; focusing a field must not scroll the header away. */
    overflow: clip;
}

#shared-popup-shell > #deck-search-dialog[data-popup-pane] {
    display: block;
    height: min(56rem, var(--popup-screen-height));
}

#shared-popup-shell > .deck-price-info[data-popup-pane] { display: block; }
[data-popup-pane][hidden] { display: none !important; }

@media (max-width: 40rem) {
    :root {
        --popup-screen-top: max(.5rem, env(safe-area-inset-top));
        --popup-screen-bottom: max(.5rem, env(safe-area-inset-bottom));
    }
}

@media (max-width: 35.99rem) {
    #deck-search-dialog,
    #shared-popup-shell[data-popup-kind="search"] { width: 100%; }

    #deck-search-dialog,
    #shared-popup-shell > #deck-search-dialog[data-popup-pane] {
        height: var(--popup-screen-height);
        max-height: var(--popup-screen-height);
    }

    #deck-search-dialog .deck-search-root { --deck-search-heading-height: 3.5rem; }
    #deck-search-dialog .deck-search-heading { padding-top: 0; }
}

@media (max-width: 35.99rem) and (max-height: 32rem) {
    #deck-search-dialog .deck-search-root { --deck-search-heading-height: 3rem; }
}