/*
 * SCM UI Kit - Karting live timing (league plan N2, G5)
 *
 * The look of KartingLiveTiming (Client/Components/Displays), the running order of a karting heat on a public page: the
 * website's live leaderboard module, a guest's Activity Guide and, later, a league round's page. Declared by each module
 * that renders it (WebsiteDisplayResources.KartingLiveStylesheets), never on every public page.
 *
 * Born token-only: every color is a --simx-* token, which SCMUIKit.theme-bridge.css maps from the site theme's --scm-*
 * inside every .scm-mod root, with the shipped literal as the fallback. It follows the site's theme, never the visitor's
 * device (no prefers-color-scheme). Class chips are the UI kit's .simx-class-chip (SCMUIKit.components.css).
 */

.kl-timing {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--simx-border-default, var(--scm-border, #e2e8f0));
    border-radius: var(--simx-radius-md, 0.375rem);
    background: var(--simx-bg-surface, var(--scm-surface, #ffffff));
    color: var(--simx-text-primary, var(--scm-surface-contrast, #0f172a));
    font-variant-numeric: tabular-nums;
}

.kl-timing--idle {
    align-items: center;
    text-align: center;
}

.kl-timing__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.kl-timing__heading {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.kl-timing__state {
    align-self: flex-start;
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--simx-border-default, var(--scm-border, #e2e8f0));
    background: var(--simx-bg-sunken, var(--scm-surface-muted, #f1f5f9));
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.kl-timing--racing .kl-timing__state {
    border-color: var(--simx-accent, var(--scm-accent, #2563eb));
    background: var(--simx-accent, var(--scm-accent, #2563eb));
    color: var(--simx-text-on-accent, var(--scm-accent-contrast, #ffffff));
}

.kl-timing__name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.kl-timing__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    color: var(--simx-text-secondary, var(--scm-text-secondary, #475569));
    font-size: 0.875rem;
}

.kl-timing__classes {
    margin-top: 0.15rem;
}

.kl-timing__clock {
    font-family: var(--simx-font-mono, ui-monospace, "Cascadia Mono", Consolas, monospace);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.kl-timing__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.kl-timing__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.kl-timing__table th {
    padding: 0.4rem 0.5rem;
    border-bottom: 2px solid var(--simx-border-default, var(--scm-border, #e2e8f0));
    color: var(--simx-text-secondary, var(--scm-text-secondary, #475569));
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.kl-timing__table td {
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid var(--simx-border-subtle, var(--scm-border-light, #eef2f6));
    vertical-align: middle;
}

.kl-timing__table .kl-timing__num {
    text-align: center;
    white-space: nowrap;
}

.kl-timing__table .kl-timing__time {
    font-family: var(--simx-font-mono, ui-monospace, "Cascadia Mono", Consolas, monospace);
    text-align: right;
    white-space: nowrap;
}

.kl-timing__pos {
    font-weight: 700;
}

.kl-timing__driver {
    min-width: 9rem;
}

.kl-timing__driver > * + * {
    margin-left: 0.4rem;
}

.kl-timing__driver-name {
    font-weight: 600;
}

.kl-timing__row--mine,
.kl-timing__roster-row.kl-timing__row--mine {
    background: var(--simx-bg-hover, var(--scm-surface-hover, #f8fafc));
    box-shadow: inset 3px 0 0 var(--simx-accent, var(--scm-accent, #2563eb));
}

.kl-timing__row--fastest .kl-timing__time:nth-last-child(2) {
    color: var(--simx-accent, var(--scm-accent, #2563eb));
    font-weight: 700;
}

.kl-timing__row--out {
    opacity: 0.6;
}

.kl-timing__time--void {
    text-decoration: line-through;
    opacity: 0.6;
}

.kl-timing__you {
    display: inline-block;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--simx-accent, var(--scm-accent, #2563eb));
    color: var(--simx-text-on-accent, var(--scm-accent-contrast, #ffffff));
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}

.kl-timing__penalty {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--simx-danger-text, var(--scm-error, #b91c1c));
}

/* League plan M2: on a team's row, the driver at the wheel now. */
.kl-timing__team-driver {
    font-size: 0.8rem;
    color: var(--simx-text-secondary, var(--scm-text-muted, #6c757d));
    white-space: nowrap;
}

.kl-timing__waiting {
    margin: 0;
    color: var(--simx-text-secondary, var(--scm-text-secondary, #475569));
}

.kl-timing__roster {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kl-timing__roster-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--simx-border-subtle, var(--scm-border-light, #eef2f6));
}

.kl-timing__kart {
    min-width: 2.5rem;
    font-weight: 700;
    text-align: center;
}

@media (max-width: 575.98px) {
    .kl-timing {
        padding: 0.75rem;
    }

    .kl-timing__clock {
        font-size: 1.35rem;
    }

    .kl-timing__table {
        font-size: 0.85rem;
    }

    .kl-timing__table th,
    .kl-timing__table td {
        padding: 0.35rem 0.3rem;
    }
}