/*
 * Project-specific styles layered on top of Tailwind.
 * (Tailwind is loaded via CDN in M0; a precompiled build replaces it later.)
 */

:focus-visible {
    outline: 2px solid #b91c1c;
    outline-offset: 2px;
}

html {
    scroll-behavior: smooth;
}

/* Hide Alpine elements until the framework has initialized. */
[x-cloak] {
    display: none !important;
}

/*
 * Responsive "stacked card" tables. Below the sm breakpoint (<640px) a table
 * marked .resp-cards turns each row into a card: the header is hidden and every
 * <td> shows its column name (from data-label) on the left, value on the right.
 * A <td> WITHOUT a data-label renders as a full-width block (used for the row's
 * primary cell, e.g. the athlete's name, which acts as the card title).
 * Used on visitor- and team-facing tables so wide tables stay readable on phones
 * without horizontal scrolling. Desktop is unaffected.
 */
@media (max-width: 639.98px) {
    table.resp-cards,
    table.resp-cards tbody,
    table.resp-cards tfoot {
        display: block;
        width: 100%;
    }
    table.resp-cards thead {
        display: none;
    }
    table.resp-cards tr {
        display: block;
        padding: 0.625rem 1rem;
    }
    table.resp-cards td {
        display: flex;
        width: 100%;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.15rem 0 !important;
        text-align: right;
        white-space: normal;
    }
    table.resp-cards td::before {
        content: attr(data-label);
        flex: none;
        text-align: left;
        font-weight: 600;
        color: #78716c; /* stone-500 */
    }
    table.resp-cards td:not([data-label]) {
        display: block;
        text-align: left;
        font-weight: 600;
        padding-bottom: 0.25rem !important;
    }
    table.resp-cards td:not([data-label])::before {
        content: none;
    }
}