/* Keep the three secondary four-way switches visually compact with a real 44px target. */
@media (max-width: 767px) {
    body.unified-page #infoCardsSection :is(
        #newsInfoTabs,
        #stockInfoTabs,
        #bidWorkTabs
    ) {
        display: inline-flex !important;
        grid-template-columns: none !important;
        align-items: center !important;
        justify-content: flex-start !important;
        justify-self: start;
        width: max-content !important;
        max-width: 100%;
        gap: 1px !important;
        height: 20px !important;
        min-height: 20px !important;
        overflow: visible !important;
    }

    body.unified-page #infoCardsSection :is(
        #newsInfoTabs,
        #stockInfoTabs,
        #bidWorkTabs
    ) .info-tab-btn {
        position: relative !important;
        isolation: isolate;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        flex: 0 0 36px !important;
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        padding: 0 !important;
        height: 20px !important;
        min-height: 20px !important;
        overflow: visible !important;
    }

    body.unified-page #infoCardsSection :is(
        #newsInfoTabs,
        #stockInfoTabs,
        #bidWorkTabs
    ) .info-tab-btn::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: min(30px, calc(100% - 6px));
        height: 18px;
        transform: translate(-50%, -50%);
        z-index: -1;
        border: 1px solid #d9e2ef;
        border-radius: 6px;
        background: #f8fafc;
        pointer-events: none;
    }

    body.unified-page #infoCardsSection :is(
        #newsInfoTabs,
        #stockInfoTabs,
        #bidWorkTabs
    ) .info-tab-btn:enabled {
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
    }

    body.unified-page #infoCardsSection :is(
        #newsCard,
        #stockCard,
        #bidWorkCard
    ) .info-card-header {
        margin-bottom: 11px !important;
    }

    body.unified-page #infoCardsSection :is(
        #newsInfoTabs,
        #stockInfoTabs,
        #bidWorkTabs
    ) .info-tab-btn:is(.active, [aria-selected="true"])::before {
        border-color: #2563eb;
        background: #eff6ff;
    }

    body.unified-page #infoCardsSection :is(
        #newsCard,
        #stockCard
    ) .info-card-pager {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: 100%;
        height: 44px;
        min-height: 44px;
    }

    body.unified-page #infoCardsSection .info-card-pager-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #1d4ed8;
    }

    body.unified-page #infoCardsSection .info-card-pager-btn > span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border: 1px solid #cbd5e1;
        border-radius: 999px;
        background: #fff;
        font-size: 1.35rem;
        line-height: 1;
        pointer-events: none;
    }

    body.unified-page #infoCardsSection .info-card-pager-btn:focus-visible {
        outline: 2px solid #2563eb;
        outline-offset: -2px;
        border-radius: 8px;
    }

    body.unified-page #infoCardsSection .info-card-pager-btn:disabled {
        color: #94a3b8;
        opacity: 0.55;
    }

    body.unified-page #infoCardsSection .info-card-pager .info-card-indicator {
        min-width: 42px;
        text-align: center;
    }

}
