/* Historical Intelligence responsive styles.
   Loaded only below 991.98px. Desktop remains controlled by /css/historical-intelligence.css. */

@media (max-width: 991.98px) {
    :root {
        --hi-mobile-rank-width: 42px;
        --hi-mobile-player-width: 142px;
    }

    .hi-workspace {
        padding-top: .65rem;
        padding-bottom: 1.5rem;
    }

    .hi-stat-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hi-stat-strip > div {
        min-width: 0;
        padding: .58rem .65rem;
    }

    .hi-stat-strip > div:nth-child(2n) {
        border-right: 0;
    }

    .hi-stat-strip > div:nth-child(-n+2) {
        border-bottom: 1px solid var(--hi-line);
    }

    .hi-stat-strip strong {
        font-size: 1rem;
    }

    .hi-stat-strip small {
        font-size: .61rem;
        line-height: 1.3;
    }

    .hi-research-controls,
    .hi-research-controls.has-custom-range {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .48rem;
        padding: .62rem;
    }

    .hi-search-field {
        grid-column: 1 / -1;
    }

    .hi-research-controls input,
    .hi-research-controls select {
        min-height: 35px;
        padding: .4rem .5rem;
        font-size: .73rem;
    }

    .hi-tabs {
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline proximity;
    }

    .hi-tabs button {
        padding: .55rem .72rem .5rem;
        font-size: .66rem;
        scroll-snap-align: start;
    }

    .hi-highlight {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .48rem .75rem;
        min-height: 0;
        padding: .58rem .68rem;
    }

    .hi-highlight__label {
        grid-column: 1 / -1;
        font-size: .58rem;
    }

    .hi-highlight__identity strong {
        font-size: .82rem;
    }

    .hi-highlight__score {
        padding-left: .65rem;
    }

    .hi-highlight__score strong {
        font-size: 1.05rem;
    }

    .hi-highlight__tags {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .hi-view-heading {
        align-items: flex-start;
        padding: .52rem .62rem;
    }

    .hi-view-heading p {
        font-size: .63rem;
        line-height: 1.35;
    }

    .hi-table-frame {
        min-width: 0;
        overflow: hidden;
    }

    .hi-table-scroll {
        width: 100%;
        height: min(70vh, 680px);
        max-width: 100%;
        overflow: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .hi-table {
        min-width: max-content;
        font-size: .66rem;
    }

    .hi-table th,
    .hi-table td {
        min-width: 68px;
        padding: .42rem .44rem;
    }

    .hi-group-row th {
        height: 23px;
        padding: .28rem .4rem;
        font-size: .51rem;
    }

    .hi-column-row th {
        font-size: .59rem;
    }

    /* Only Rank and Player remain frozen on mobile. */
    .hi-table th.hi-sticky,
    .hi-table td.hi-sticky {
        position: static;
        left: auto;
        z-index: auto;
        min-width: 68px !important;
        width: auto !important;
    }

    .hi-table th:nth-child(1),
    .hi-table td:nth-child(1) {
        position: sticky;
        left: 0;
        z-index: 18;
        width: var(--hi-mobile-rank-width) !important;
        min-width: var(--hi-mobile-rank-width) !important;
        max-width: var(--hi-mobile-rank-width) !important;
        padding-left: .28rem;
        padding-right: .28rem;
        background: #121819;
    }

    .hi-table th:nth-child(2),
    .hi-table td:nth-child(2) {
        position: sticky;
        left: var(--hi-mobile-rank-width);
        z-index: 17;
        width: var(--hi-mobile-player-width) !important;
        min-width: var(--hi-mobile-player-width) !important;
        max-width: var(--hi-mobile-player-width) !important;
        background: #121819;
    }

    .hi-table thead th:nth-child(1),
    .hi-table thead th:nth-child(2) {
        z-index: 28;
        background: #151c1d;
    }

    .hi-table tbody tr:hover > td:nth-child(1),
    .hi-table tbody tr:hover > td:nth-child(2) {
        background: #171e1f;
    }

    .hi-table td:nth-child(2),
    .hi-table th:nth-child(2) {
        overflow: hidden;
    }

    .hi-player {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hi-table .hi-sticky--last::after {
        display: none;
    }

    .hi-table th:nth-child(2)::after,
    .hi-table td:nth-child(2)::after {
        content: "";
        position: absolute;
        top: 0;
        right: -8px;
        bottom: 0;
        width: 8px;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(0, 0, 0, .3), transparent);
    }



    .hi-tags-cell {
        min-width: 170px !important;
    }

    .hi-tags {
        min-width: 150px;
    }
}

@media (max-width: 575.98px) {
    :root {
        --hi-mobile-rank-width: 38px;
        --hi-mobile-player-width: 134px;
    }

    .hi-stat-strip > div {
        padding: .52rem .58rem;
    }

    .hi-highlight {
        padding: .52rem .58rem;
    }

    .hi-view-heading {
        flex-direction: column;
        gap: .25rem;
    }

    .hi-table-scroll {
        height: 68vh;
    }
}


/* Final mobile sticky-header model: same two-row stacking used by the main Intelligence grids. */
@media (max-width: 991.98px) {
    .hi-table-scroll { isolation: isolate; }
    .hi-table thead {
        position: relative !important;
        top: auto !important;
        z-index: 30;
    }
    .hi-table tbody {
        position: relative;
        z-index: 1;
    }
    .hi-table thead th {
        position: sticky !important;
    }
    .hi-group-row th {
        top: 0 !important;
        z-index: 32 !important;
        height: 24px;
        min-height: 24px;
    }
    .hi-column-row th {
        top: 23px !important;
        z-index: 31 !important;
        box-shadow: inset 0 1px 0 rgba(221, 228, 224, .18);
    }

    /* Frozen header intersections. Each group cell matches one real column. */
    .hi-group-row .hi-mobile-identity-group {
        position: sticky !important;
        left: 0 !important;
        z-index: 40 !important;
        width: calc(var(--hi-mobile-rank-width) + var(--hi-mobile-player-width)) !important;
        min-width: calc(var(--hi-mobile-rank-width) + var(--hi-mobile-player-width)) !important;
        max-width: calc(var(--hi-mobile-rank-width) + var(--hi-mobile-player-width)) !important;
        background: #111718 !important;
        box-shadow: 1px 0 0 rgba(221, 228, 224, .18), 8px 0 16px rgba(0, 0, 0, .16);
    }

    /* Freeze Rank and Player only in the actual column row and body. */
    .hi-column-row th:nth-child(1),
    .hi-table tbody td:nth-child(1) {
        position: sticky !important;
        left: 0 !important;
        width: var(--hi-mobile-rank-width) !important;
        min-width: var(--hi-mobile-rank-width) !important;
        max-width: var(--hi-mobile-rank-width) !important;
        background: #151c1d;
    }
    .hi-column-row th:nth-child(2),
    .hi-table tbody td:nth-child(2) {
        position: sticky !important;
        left: var(--hi-mobile-rank-width) !important;
        width: var(--hi-mobile-player-width) !important;
        min-width: var(--hi-mobile-player-width) !important;
        max-width: var(--hi-mobile-player-width) !important;
        background: #151c1d;
    }
    .hi-column-row th:nth-child(1) { z-index: 35 !important; }
    .hi-column-row th:nth-child(2) {
        z-index: 34 !important;
        box-shadow: inset 0 1px 0 rgba(221, 228, 224, .18), 1px 0 0 rgba(221, 228, 224, .18), 8px 0 16px rgba(0, 0, 0, .16);
    }
    .hi-table tbody td:nth-child(1) { z-index: 5 !important; background: #121819; }
    .hi-table tbody td:nth-child(2) {
        z-index: 4 !important;
        background: #121819;
        box-shadow: 1px 0 0 rgba(221, 228, 224, .14), 8px 0 16px rgba(0, 0, 0, .13);
    }
}