/*
 * "Recently checked channels" (views/recent.ejs). The table, its rows and the
 * View buttons are base.css's, as on the home list; this file carries the page's
 * layout, the status line and the end of the list, and the home list's phone
 * layout (main.css, #recent_checked_channels), which main.css scopes to the home
 * page's id.
 */

.recent-page {
    flex: 1 0 auto;
    padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(2rem, 6vw, 4rem);
}

/* the page's title, under the compact header (partials/site_header.ejs), as on /stats */
.recent-title {
    margin-bottom: var(--space-3);
    font-size: var(--fs-page-title);
    font-weight: 600;
}

.recent-intro {
    max-width: 46rem;
    margin: 0 0 var(--space-4);
    color: var(--text-muted);
}

/* loading, how many rows came in, the end of the list or an error (views/js/recent.js) */
.recent-status {
    min-height: 1.4em;
    margin: var(--space-3) 0 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.recent-more {
    display: flex;
    justify-content: center;
    margin-top: var(--space-3);
}

.recent-end {
    margin: 0;
    color: var(--text-muted);
}

/* the button while its page loads (aria-disabled keeps it focusable) */
.recent-more .btn[aria-disabled="true"] {
    cursor: progress;
    opacity: .75;
}

/* On a phone, one compact row per channel, as the home list (main.css): the thumbnail on the
   left, the title and one wrapping line of subscribers, score and when on the right, and no
   View button, which goes where the title does. */
@container tablewrap (max-width: 46rem) {
    .recent-list tbody tr {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: .1rem var(--space-3);
        min-height: calc(48px + 1.7rem);
        padding-left: calc(var(--space-4) + 48px + var(--space-3));
    }

    .recent-list tbody td {
        display: block;
        padding: 0;
    }

    .recent-list tbody td:first-child {
        position: absolute;
        top: .85rem;
        left: var(--space-4);
    }

    .recent-list tbody td[data-label="Channel"] {
        flex: 1 1 100%;
        font-weight: 500;
    }

    .recent-list tbody td[data-label]::before {
        margin-right: .3rem;
    }

    .recent-list tbody td[data-label="Channel"]::before,
    .recent-list tbody td:last-child:not(.cell-center) {
        display: none;
    }

    .recent-list tbody td.cell-center {
        position: static;
        flex: 1 1 100%;
        text-align: center;
    }
}