/* Sibling overlays: never participate in the list's scroll height or hit testing. */
#pane-words { position: relative; }
#word-list { position: relative; }

.word-scroll-hints {
    position: absolute;
    left: 0;
    right: 6px;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.word-scroll-hint {
    position: absolute;
    left: 0;
    right: 0;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 4px;
    color: #52525b;
    font-size: 11px;
    font-weight: 500;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
}

.word-scroll-hint[hidden] { display: none; }
.word-scroll-hint--top { top: 0; }
.word-scroll-hint--bottom { bottom: 0; padding-top: 12px; }

.word-scroll-hint::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #fff 0%, #ffffffeb 35%, #ffffff00 100%);
}

.word-scroll-hint--bottom::before { transform: rotate(180deg); }
.word-scroll-hint span { position: relative; white-space: nowrap; }

/* Blur stays fixed and small; unsupported browsers retain the white gradient. */
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) and ((mask-image: linear-gradient(#000, transparent)) or (-webkit-mask-image: linear-gradient(#000, transparent))) {
    .word-scroll-hint::before {
        background: #fffffff0;
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 100%);
    }
}