/* ==============================================
   records.css – Lap records page
   (builds on the dl-* styles of drivers.css)
   ============================================== */

body.records-page .banner { display: none; }
body.records-page .page-container { max-width: 100%; padding: 0; }

/* The site-wide a:hover underline does not belong on this page (cards, tabs, names, links) */
body.records-page a,
body.records-page a:hover,
body.records-page a:focus { text-decoration: none; }

/* ── Sim switcher ── */
.rc-sims { display: flex; gap: 8px; flex-wrap: wrap; }
.rc-sim {
    padding: 8px 18px; border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    color: #777; font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase;
    text-decoration: none; transition: all 0.15s;
}
.rc-sim:hover { border-color: rgba(0,191,255,0.4); color: #00bfff; }
.rc-sim.active { background: rgba(0,191,255,0.1); border-color: rgba(0,191,255,0.5); color: #00bfff; font-weight: 700; }

/* ── Filters ── */
.rc-filters { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.rc-field { display: flex; flex-direction: column; gap: 6px; min-width: 220px; flex: 0 1 320px; }
.rc-field span { font-size: 0.6rem; letter-spacing: 2px; text-transform: uppercase; color: #555; }
.rc-field select {
    background: #1b1b1b; color: #ccc; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px; padding: 10px 12px; font-size: 0.85rem; font-family: 'Lato', sans-serif;
}
.rc-field select:focus { outline: none; border-color: rgba(0,191,255,0.5); }

/* ── Overview grid ── */
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.rc-track {
    display: block; text-decoration: none; overflow: hidden;
    background: linear-gradient(180deg, #1e1e1e, #191919);
    border: 1px solid rgba(0,191,255,0.1); border-radius: 12px;
    transition: transform 0.15s, border-color 0.15s;
}
.rc-track:hover { transform: translateY(-3px); border-color: rgba(0,191,255,0.4); }
.rc-track-img { height: 150px; background-size: cover; background-position: center; background-color: #111; }
.rc-track-body { padding: 14px 16px 16px; }
.rc-track-name { color: #fff; font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; }
.rc-track-time { font-family: 'Audiowide', sans-serif; font-size: 1.5rem; color: #ffd700; letter-spacing: 1px; margin-bottom: 6px; }
.rc-track-meta { color: #bbb; font-size: 0.82rem; }
.rc-dim, .rc-track-meta.rc-dim { color: #666; }
.rc-track-foot { display: flex; justify-content: space-between; margin-top: 10px; color: #555; font-size: 0.68rem; letter-spacing: 1px; text-transform: uppercase; }

/* ── Leaderboard ── */
.rc-hero { height: 190px; background-size: cover; background-position: center; border-radius: 12px; overflow: hidden; margin-bottom: 20px; background-color: #111; }
.rc-hero-shade {
    height: 100%; padding: 22px 26px; display: flex; flex-direction: column; justify-content: space-between;
    background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.75));
}
.rc-hero-name { font-family: 'Audiowide', sans-serif; font-size: 1.6rem; color: #fff; letter-spacing: 1px; }
.rc-back { align-self: flex-start; color: #ccc; font-size: 0.75rem; text-decoration: none; letter-spacing: 1px; text-transform: uppercase; }
.rc-back:hover { color: #00bfff; }

.rc-time { font-family: 'Audiowide', sans-serif; font-size: 0.95rem; color: #fff; letter-spacing: 0.5px; }
.rc-time.best { color: #ffd700; }
.rc-gap { color: #777; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-car { display: flex; align-items: center; gap: 12px; }
.rc-car-img { width: 64px; height: 34px; flex: none; border-radius: 4px; background-size: cover; background-position: center; background-color: #111; }
.rc-car small { display: block; color: #555; font-size: 0.68rem; letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; }
.rc-empty { padding: 28px; text-align: center; color: #555; }

@media (max-width: 640px) {
    .rc-field { flex: 1 1 100%; }
    .rc-hero { height: 140px; }
}