/* Ghostlight pairs readable ink with paper, and dark pills with dark cards. */
body.home-page:not(:is(.skin-after-hours, .skin-dark-academia, .skin-burnish, .skin-autumn, .skin-stormglass, .skin-blue, .skin-fernwood, .skin-matcha, .skin-night-bloom, .skin-plum, .skin-cotton-candy)) {
    --preview-pill: #e8dfdb;
    --preview-pill-border: #b3a19b;
    --preview-ink: #332d32;
    --preview-action: #493449;
    --preview-action-border: #735c73;
    --preview-action-ink: #fffaf4;
}
body.home-page.dark-mode:not(:is(.skin-after-hours, .skin-dark-academia, .skin-burnish, .skin-autumn, .skin-stormglass, .skin-blue, .skin-fernwood, .skin-matcha, .skin-night-bloom, .skin-plum, .skin-cotton-candy)) {
    --preview-pill: #41404a;
    --preview-pill-border: #85818d;
    --preview-ink: #f2ece8;
    --preview-action: #5b4358;
    --preview-action-border: #9e8398;
    --preview-action-ink: #fffaf4;
}
html body.home-page:not(:is(.skin-after-hours, .skin-dark-academia, .skin-burnish, .skin-autumn, .skin-stormglass, .skin-blue, .skin-fernwood, .skin-matcha, .skin-night-bloom, .skin-plum, .skin-cotton-candy))
    #gm-shelf-preview :is(.gm-shelf-preview-topline span, .gm-shelf-preview-tag) {
    background: var(--preview-pill) !important;
    border-color: var(--preview-pill-border) !important;
    color: var(--preview-ink) !important;
    -webkit-text-fill-color: var(--preview-ink) !important;
}
html body.home-page:not(:is(.skin-after-hours, .skin-dark-academia, .skin-burnish, .skin-autumn, .skin-stormglass, .skin-blue, .skin-fernwood, .skin-matcha, .skin-night-bloom, .skin-plum, .skin-cotton-candy))
    #gm-shelf-preview .gm-shelf-read-now {
    background: var(--preview-action) !important;
    border-color: var(--preview-action-border) !important;
    color: var(--preview-action-ink) !important;
    -webkit-text-fill-color: var(--preview-action-ink) !important;
    font: 700 .9rem/1.2 var(--font-ui, sans-serif) !important;
}

/* Cool dark previews use dark pills and a matching primary action. */
body.home-page.dark-mode:is(.skin-stormglass, .skin-blue) .gm-shelf-preview {
    --preview-pill: #344b58;
    --preview-pill-border: #6e8b99;
    --preview-ink: #f0f5f6;
    --preview-action: #41677a;
    --preview-action-border: #8daebb;
}
body.home-page.dark-mode:is(.skin-night-bloom, .skin-plum, .skin-cotton-candy) .gm-shelf-preview {
    --preview-pill: #4c3948;
    --preview-pill-border: #997b8d;
    --preview-ink: #faedf2;
    --preview-action: #724960;
    --preview-action-border: #bb92a8;
}
body.home-page.dark-mode:is(.skin-stormglass, .skin-blue, .skin-night-bloom, .skin-plum, .skin-cotton-candy)
    .gm-shelf-preview :is(.gm-shelf-preview-topline span, .gm-shelf-preview-tag) {
    background: var(--preview-pill) !important;
    border-color: var(--preview-pill-border) !important;
    color: var(--preview-ink) !important;
    -webkit-text-fill-color: var(--preview-ink) !important;
}
body.home-page.dark-mode:is(.skin-stormglass, .skin-blue, .skin-night-bloom, .skin-plum, .skin-cotton-candy)
    .gm-shelf-preview .gm-shelf-read-now {
    background: var(--preview-action) !important;
    border-color: var(--preview-action-border) !important;
    color: var(--preview-ink) !important;
    -webkit-text-fill-color: var(--preview-ink) !important;
}
body.home-page.dark-mode:is(.skin-stormglass, .skin-blue, .skin-night-bloom, .skin-plum, .skin-cotton-candy)
    .gm-shelf-preview .gm-shelf-read-now:hover {
    filter: brightness(1.14);
}

html body.home-page #gm-shelf-preview .gm-shelf-preview-art {
    text-decoration: none !important;
}
html body.home-page #gm-shelf-preview .gm-shelf-preview-actions-top > :is(a, button) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
}

/* Keep the banner and close control visible while the mobile card body scrolls. */
@media (max-width: 760px), (hover: none), (pointer: coarse) {
    html body.home-page #gm-shelf-preview {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        max-height: calc(100dvh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        overflow: hidden !important;
    }
    html body.home-page #gm-shelf-preview .gm-shelf-preview-art {
        flex: 0 0 auto;
    }
    html body.home-page #gm-shelf-preview .gm-shelf-preview-body {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }
    html body.home-page #gm-shelf-preview button#gm-shelf-preview-close {
        display: grid !important;
        place-items: center;
        width: 36px;
        height: 36px;
        min-height: 36px;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid rgb(255 248 237 / 45%) !important;
        border-radius: 50% !important;
        background: #192024 !important;
        background-image: none !important;
        color: #fff8ed !important;
        -webkit-text-fill-color: #fff8ed !important;
        font: 500 1.5rem/1 sans-serif !important;
        text-shadow: none;
        cursor: pointer;
    }
}