/* Mobile-only affordance for horizontally scrollable tables. */
.mobile-table-scroll-guide {
    display: none;
}

@media (max-width: 768px) {
    .mobile-table-scroll-guide {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        width: 100%;
        margin: 5px 0 7px;
        padding: 0 2px;
        color: #0755a4;
        font-size: 0.78rem;
        font-weight: 900;
        line-height: 1.3;
        letter-spacing: 0;
        pointer-events: none;
    }

    .mobile-table-scroll-guide-text {
        white-space: nowrap;
    }

    .mobile-table-scroll-guide-arrow {
        display: inline-block;
        min-width: 20px;
        color: #e44a25;
        font-size: 1.1rem;
        line-height: 1;
        text-align: center;
        animation: mobileTableScrollArrow 1.45s ease-in-out infinite;
    }

    .mobile-table-scroll-guide.is-used {
        opacity: 0.76;
    }

    .mobile-table-scroll-guide.is-at-end .mobile-table-scroll-guide-arrow {
        animation-direction: reverse;
    }

    .mobile-table-scroll-rail {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #0b5fb4 #dce9f7;
    }

    .mobile-table-scroll-rail::-webkit-scrollbar {
        height: 8px;
    }

    .mobile-table-scroll-rail::-webkit-scrollbar-track {
        border-radius: 999px;
        background: #dce9f7;
    }

    .mobile-table-scroll-rail::-webkit-scrollbar-thumb {
        min-width: 44px;
        border: 1px solid #dce9f7;
        border-radius: 999px;
        background: #0b5fb4;
    }

    .mobile-table-scroll-rail:focus-visible {
        outline: 3px solid rgba(11, 95, 180, 0.34);
        outline-offset: 2px;
    }

    .mobile-table-scroll-generated {
        margin: 16px 0 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-table-scroll-guide-arrow {
        animation: none !important;
    }
}

@keyframes mobileTableScrollArrow {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
}