/* The Lorencia Ring's records (/races, docs/lorencia-races.md). The tabs, chips and tables of style.css; the times line up in
   tabular figures, the column the board orders by is white, a held run of your own carries the accent and the gold of a hold. */

.races-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 0.6rem;
}

.races-table td { vertical-align: top; }
.races-sorted { color: #fff; font-weight: 700; }
.races-set { color: var(--muted); font-size: 0.84rem; white-space: nowrap; }

.races-sub {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--faint);
    overflow-wrap: break-word;
}
.races-sm { display: none; }

.races-laps-btn {
    width: auto;
    margin: 0 0 0 6px;
    padding: 1px 7px;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    box-shadow: none;
}
.races-laps-btn:hover { color: var(--text); background: transparent; box-shadow: none; transform: none; filter: none; }
.races-laps-btn[aria-expanded="true"] { color: #fff; border-color: var(--accent); }

.races-racer-row:hover { background: transparent; }
.races-racer-row > td { padding: 4px 12px 14px; background: rgba(0, 0, 0, 0.2); }
.races-racer-head { margin: 8px 0 0; color: var(--muted); font-size: 0.84rem; }
.races-racer-table th, .races-racer-table td { padding: 6px 8px; font-size: 0.8rem; }

.races-own td { color: var(--accent-hi); border-top: 1px solid var(--accent-line); }
.races-own .races-hold { color: #fcd34d; font-size: 0.8rem; font-weight: 400; }

.races-note {
    margin: 0.9rem 0 0;
    color: var(--muted);
    font-size: 0.86rem;
}

.races-past {
    margin: 0;
    padding: 0;
    list-style: none;
}
.races-past li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 8px 0;
    border-top: 1px solid var(--line);
}
.races-past li:first-child { border-top: 0; }
.races-past .races-winner { font-size: 0.9rem; color: var(--secret-gold); }
.races-past .char-link { color: var(--secret-gold); font-weight: 600; }

.races-week-btn {
    width: auto;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--accent-hi);
    background: transparent;
    border: 0;
    box-shadow: none;
}
.races-week-btn:hover { color: #fff; background: transparent; box-shadow: none; transform: none; filter: none; }
.races-past .is-current .races-week-btn { color: #fff; font-weight: 700; }

.races-how {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--muted);
}
.races-how li { margin-top: 6px; }
.races-how li:first-child { margin-top: 0; }

/* The table's width on phones: the set time and a held run's note move under the name, as .hide-sm hides their column. */
@media (max-width: 600px) {
    .races-sm { display: block; }
    .races-table th, .races-table td { padding: 8px 4px; }
    .races-table th { font-size: 0.62rem; letter-spacing: 0.04em; white-space: normal; }
    .races-racer-table th, .races-racer-table td { padding: 5px 3px; font-size: 0.74rem; }
    .races-racer-row > td { padding: 4px 4px 12px; }
}