/* EnglishGrammar.org compact infinite-scroll list styles. */
/* Compact exercise filters. */
        .eg-infscroll-component--exercises .eg-level-filters {
            margin: 0 0 18px !important;
        }
        .eg-infscroll-component--exercises .eg-level-filters__list {
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: center !important;
            gap: 8px !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        .eg-infscroll-component--exercises .eg-level-filters__link {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            min-width: 58px !important;
            min-height: 36px !important;
            padding: 5px 15px !important;
            border: 2px solid #356d22 !important;
            border-radius: 999px !important;
            background: #fff !important;
            color: #315e23 !important;
            font-size: 15px !important;
            font-weight: 700 !important;
            line-height: 1 !important;
            text-decoration: none !important;
            box-sizing: border-box !important;
        }
        .eg-infscroll-component--exercises .eg-level-filters__link:hover,
        .eg-infscroll-component--exercises .eg-level-filters__link:focus {
            background: #f4f8ef !important;
            color: #244818 !important;
        }
        .eg-infscroll-component--exercises .eg-level-filters__link.is-active {
            border-color: #d1b72f !important;
            background: #f9df55 !important;
            color: #111 !important;
            box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08) !important;
        }
        .eg-infscroll-component--exercises .eg-level-filters__link--pro {
            font-weight: 700 !important;
        }

        /* Compact, scan-friendly exercise rows. */
        .eg-infscroll-component--exercises #pnlInfScroll_PostsList {
            margin: 0 !important;
            padding: 0 !important;
            list-style: none !important;
        }
        .eg-infscroll-component--exercises .eg-infscroll-post-item {
            display: grid !important;
            grid-template-columns: 78px minmax(0, 1fr) auto !important;
            align-items: center !important;
            column-gap: 10px !important;
            min-width: 0 !important;
            margin: 0 !important;
            padding: 7px 6px !important;
            border-bottom: 1px solid #edf0e9 !important;
            border-radius: 5px !important;
            list-style: none !important;
            line-height: 1.3 !important;
            box-sizing: border-box !important;
        }
        .eg-infscroll-component--exercises .eg-infscroll-post-item::before,
        .eg-infscroll-component--exercises .eg-infscroll-post-item::marker {
            content: none !important;
            display: none !important;
        }
        .eg-infscroll-component--exercises .eg-infscroll-post-item:hover {
            background: #f7f9f4 !important;
        }
        .eg-infscroll-component--exercises .eg-infscroll-date {
            color: #667064 !important;
            font-size: 13px !important;
            font-variant-numeric: tabular-nums !important;
            white-space: nowrap !important;
        }
        .eg-infscroll-component--exercises .eg-infscroll-title {
            display: block !important;
            min-width: 0 !important;
            overflow: hidden !important;
            color: #3c8f25 !important;
            font-size: 16px !important;
            line-height: 1.3 !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
            text-decoration: none !important;
        }
        .eg-infscroll-component--exercises .eg-infscroll-title:hover,
        .eg-infscroll-component--exercises .eg-infscroll-title:focus {
            color: #2f731d !important;
            text-decoration: underline !important;
        }
        .eg-infscroll-component--exercises .eg-post-inline-meta {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: flex-end !important;
            gap: 5px !important;
            min-width: 74px !important;
            white-space: nowrap !important;
        }
        .eg-infscroll-component--exercises .eg-post-inline-meta > * {
            flex: 0 0 auto !important;
            margin-left: 0 !important;
        }
        .eg-infscroll-component--exercises .eg-post-inline-meta img {
            display: block !important;
            width: auto !important;
            max-height: 16px !important;
        }
        .eg-infscroll-component--exercises .eg-post-inline-meta .eg-pro-label--list,
        .eg-pro-label--list {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            min-width: 36px !important;
            width: auto !important;
            height: 20px !important;
            min-height: 20px !important;
            max-height: 20px !important;
            margin: 0 !important;
            padding: 0 6px !important;
            border: 0 !important;
            border-radius: 999px !important;
            background: #1f2937 !important;
            color: #fff !important;
            font-size: 9px !important;
            font-weight: 700 !important;
            line-height: 1 !important;
            letter-spacing: 0.02em !important;
            text-transform: uppercase !important;
            vertical-align: middle !important;
            box-sizing: border-box !important;
        }
        .eg-infscroll-component--exercises .eg-infscroll-empty {
            margin: 0 !important;
            padding: 14px 8px !important;
            list-style: none !important;
        }

        /* Keep long titles readable on smaller screens. */
        @media (max-width: 760px) {
            .eg-infscroll-component--exercises .eg-level-filters__list {
                flex-wrap: nowrap !important;
                overflow-x: auto !important;
                padding-bottom: 4px !important;
                scrollbar-width: thin;
            }
            .eg-infscroll-component--exercises .eg-level-filters__link {
                flex: 0 0 auto !important;
                min-width: 54px !important;
                min-height: 34px !important;
                padding: 5px 13px !important;
                font-size: 14px !important;
            }
            .eg-infscroll-component--exercises .eg-infscroll-post-item {
                grid-template-columns: minmax(0, 1fr) auto !important;
                grid-template-areas:
                    "title meta"
                    "date meta" !important;
                row-gap: 2px !important;
                padding: 8px 4px !important;
            }
            .eg-infscroll-component--exercises .eg-infscroll-date {
                grid-area: date !important;
                font-size: 12px !important;
            }
            .eg-infscroll-component--exercises .eg-infscroll-title {
                grid-area: title !important;
                display: -webkit-box !important;
                overflow: hidden !important;
                white-space: normal !important;
                -webkit-box-orient: vertical !important;
                -webkit-line-clamp: 2 !important;
                font-size: 16px !important;
            }
            .eg-infscroll-component--exercises .eg-post-inline-meta {
                grid-area: meta !important;
                align-self: center !important;
                min-width: 68px !important;
            }
        }

/* Compact, scan-friendly layout for the Various Posts and Vocabulary pages. */
.eg-infscroll-component--posts #pnlInfScroll_PostsList,
.eg-infscroll-component--vocabulary #pnlInfScroll_PostsList {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.eg-infscroll-component--posts .eg-infscroll-post-item,
.eg-infscroll-component--vocabulary .eg-infscroll-post-item {
    display: grid !important;
    grid-template-columns: 78px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 12px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 7px 6px !important;
    border-bottom: 1px solid #edf0e9 !important;
    border-radius: 5px !important;
    list-style: none !important;
    line-height: 1.35 !important;
    box-sizing: border-box !important;
}

.eg-infscroll-component--posts .eg-infscroll-post-item::before,
.eg-infscroll-component--posts .eg-infscroll-post-item::marker,
.eg-infscroll-component--vocabulary .eg-infscroll-post-item::before,
.eg-infscroll-component--vocabulary .eg-infscroll-post-item::marker {
    content: none !important;
    display: none !important;
}

.eg-infscroll-component--posts .eg-infscroll-post-item:hover,
.eg-infscroll-component--posts .eg-infscroll-post-item:focus-within,
.eg-infscroll-component--vocabulary .eg-infscroll-post-item:hover,
.eg-infscroll-component--vocabulary .eg-infscroll-post-item:focus-within {
    background: #f7f9f4 !important;
}

.eg-infscroll-component--posts .eg-infscroll-date,
.eg-infscroll-component--vocabulary .eg-infscroll-date {
    color: #667064 !important;
    font-size: 13px !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
}

.eg-infscroll-component--posts .eg-infscroll-title,
.eg-infscroll-component--vocabulary .eg-infscroll-title {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: #3c8f25 !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

.eg-infscroll-component--posts .eg-infscroll-title:hover,
.eg-infscroll-component--posts .eg-infscroll-title:focus,
.eg-infscroll-component--vocabulary .eg-infscroll-title:hover,
.eg-infscroll-component--vocabulary .eg-infscroll-title:focus {
    color: #2f731d !important;
    text-decoration: underline !important;
}

.eg-infscroll-component--posts .eg-post-inline-meta:empty,
.eg-infscroll-component--posts .eg-post-inline-meta[aria-hidden="true"],
.eg-infscroll-component--vocabulary .eg-post-inline-meta:empty,
.eg-infscroll-component--vocabulary .eg-post-inline-meta[aria-hidden="true"] {
    display: none !important;
}

.eg-infscroll-component--posts .eg-infscroll-empty,
.eg-infscroll-component--vocabulary .eg-infscroll-empty {
    margin: 0 !important;
    padding: 14px 6px !important;
    list-style: none !important;
}

@media (max-width: 680px) {
    .eg-infscroll-component--posts .eg-infscroll-post-item,
    .eg-infscroll-component--vocabulary .eg-infscroll-post-item {
        grid-template-columns: 68px minmax(0, 1fr) !important;
        column-gap: 8px !important;
        padding: 7px 2px !important;
    }

    .eg-infscroll-component--posts .eg-infscroll-date,
    .eg-infscroll-component--vocabulary .eg-infscroll-date {
        font-size: 12px !important;
    }

    .eg-infscroll-component--posts .eg-infscroll-title,
    .eg-infscroll-component--vocabulary .eg-infscroll-title {
        display: -webkit-box !important;
        overflow: hidden !important;
        white-space: normal !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        font-size: 16px !important;
    }
}