/* ---------- Global ---------- */

:root {
    --rojo: #C8102E;        /* La Roja — leader's jersey */
    --rojo-oscuro: #94081F;
    --oro: #E3A100;         /* sun-baked hills / Spanish gold */
    --verde: #2F6F4E;       /* points jersey */
    --azul-lunares: #1C3F94;/* King of the Mountains polka dot */
    --tinta: #221B17;       /* warm ink, not pure black */
    --tdflead: #FFD100;       /* Tdf yellow jersey */
    --tdfsprint: #00a93c;     /* Tdf green jersey */
    --tdfyoung: #FFFFFF;      /* Tdf young riders jersey */
    --tdfmont: #E4002B;       /* Tdf mountain jersey — dot color for the polka-dot pattern (see .jersey-chip--mountain / th.col-mountain under body.gt-tdf). Swap this if you'd like a different dot color. */
    --girolead: #FF286E;      /* Giro pink jersey */
    --girosprint: #8E1959;    /* Giro sprint riders jersey */
    --giromont: #73BEEF;      /* Giro mountain jersey */
    --giroyoung: #FFFFFF;     /* Giro young riders jersey */
    --papel: #F5EFE0;       /* route-map paper */
    --papel-oscuro: #EAE0C8;
    --font-display: 'Oswald', 'Arial Narrow', sans-serif;
    --font-body: 'Inter', Arial, Helvetica, sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--papel);
    color: var(--tinta);
    line-height: 1.6;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    letter-spacing: 0.02em;
    color: var(--tinta);
}

/* ---------- Header ---------- */

header {
    background: #000;
    line-height: 0;
}

.site-header-wrap {
    position: relative;
    width: 100%;
}

.site-header-image {
    display: block;
    width: 100%;
    height: auto;
}

.header-nav-link {
    position: absolute;
    top: 0;
    height: 100%;
    display: block;
}

.header-nav-link:hover,
.header-nav-link:focus-visible {
    background: rgba(255,255,255,0.10);
    outline: none;
}

.header-indicator {
    position: absolute;
    top: 84%;
    height: 3px;
    border-radius: 2px;
    background: var(--oro);
    opacity: 0;
    pointer-events: none;
}

body.page-home [data-indicator="home"],
body.page-enter [data-indicator="enter"],
body.page-standings [data-indicator="standings"],
body.page-rules [data-indicator="rules"],
body.page-teams [data-indicator="teams"],
body.page-contact [data-indicator="contact"] {
    opacity: 1;
}

/* ---------- Mobile header + menu ---------- */

.mobile-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
}

.mobile-header-logo {
    height: 40px;
    width: auto;
    cursor: pointer;
}

.mobile-menu-toggle {
    background: none;
    border: none;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
}

.mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.mobile-menu-toggle.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.open span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu {
    display: none;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    background: #17120C;
    transition: max-height 0.25s ease;
}

.mobile-menu.open {
    max-height: 400px;
}

.mobile-menu a {
    display: block;
    padding: 16px 20px;
    color: white;
    text-decoration: none;
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 17px;
    letter-spacing: 0.03em;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.mobile-menu a:active {
    background: rgba(255,255,255,0.06);
}

body.page-home .mobile-menu a[data-page-link="home"],
body.page-enter .mobile-menu a[data-page-link="enter"],
body.page-standings .mobile-menu a[data-page-link="standings"],
body.page-rules .mobile-menu a[data-page-link="rules"],
body.page-teams .mobile-menu a[data-page-link="teams"],
body.page-contact .mobile-menu a[data-page-link="contact"] {
    color: var(--oro);
}

@media (max-width: 700px) {

    .site-header-wrap {
        display: none;
    }

    .mobile-header {
        display: flex;
    }

    .mobile-menu {
        display: flex;
    }

}

/* ---------- Main Content ---------- */


main {
    max-width: 1100px;
    margin: 40px auto;
    padding: 20px;
}

.card {
    background: white;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* ---------- Buttons ---------- */

.button {
    display: inline-block;
    background: var(--rojo);
    color: white;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 13px 26px;
    border-radius: 6px;
    text-decoration: none;
    margin-top: 20px;
}

.button:hover {
    background: var(--rojo-oscuro);
}

.button.secondary {
    background: transparent;
    color: var(--tinta);
    border: 2px solid var(--tinta);
}

.button.secondary:hover {
    background: var(--tinta);
    color: white;
}

/* ---------- Tables ---------- */

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    background: var(--tinta);
    color: white;
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.03em;
}

th,
td {
    padding: 12px;
    border: 1px solid #ddd;
}

td {
    font-family: var(--font-mono);
    font-size: 14px;
}

td:first-child,
td:nth-child(2) {
    font-family: var(--font-body);
}

tr:nth-child(even) {
    background: #f8f9fa;
}

tr.leaderboard-row--top {
    background: rgba(227, 161, 0, 0.18);
}

tr.leaderboard-row--top td {
    font-weight: 600;
}

/* Rank number + trend pill in the Plaats column - flex is the sole content
   of its own <td> here (not sharing an inline formatting context with
   surrounding text, unlike the rider-breakdown-toggle case), so it doesn't
   have the row-height-inflation issue fixed there - confirmed by direct
   measurement against a plain row before shipping this. */
.plaats-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.plaats-num {
    font-weight: 700;
}

.trend-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.trend-pill--up {
    background: rgba(47, 111, 78, 0.14);
    color: var(--verde);
}

.trend-pill--down {
    background: rgba(200, 16, 46, 0.1);
    color: var(--rojo);
}

.trend-pill--same {
    background: #eee;
    color: #888;
}

.participant-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted #999;
    cursor: pointer;
}

.participant-link:hover {
    color: var(--rojo);
    border-bottom-color: var(--rojo);
}

/* ---------- Footer ---------- */

footer {
    text-align: center;
    padding: 25px;
    color: #8a8072;
    font-family: var(--font-mono);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ---------- Mobile ---------- */

@media (max-width:700px) {

    nav {
        flex-direction: column;
        gap: 10px;
    }

    main {
        padding: 15px;
    }

}

label{
    display:block;
    margin-top:20px;
    font-weight:bold;
}

input,select,textarea{

    width:100%;
    padding:10px;
    margin-top:5px;
    border:1px solid #ccc;
    border-radius:5px;
    font-size:16px;
    font-family: var(--font-body);

}

button{

    margin-top:30px;
    padding:12px 20px;
    background: var(--rojo);
    color:white;
    border:none;
    border-radius:6px;
    cursor:pointer;

}

button:disabled{

    background:#999;
    cursor:not-allowed;

}

hr{
    margin:30px 0;
}

.riderInput{

    margin-bottom:15px;

}

.form-message {
    color: #c62828;
    font-weight: bold;
    margin: 10px 0;
    min-height: 1.2em;
}

.field-hint {
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    color: #777;
    font-size: 0.85em;
}

/* ---------- Enter Team: rider picker ---------- */

#selection-counter {
    font-weight: bold;
    color: var(--rojo);
    margin: 10px 0;
}

.rider-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-top: 10px;
}

/* Once entries are closed, the "zoek renner" column is hidden (no new
   riders can be added to a team - see form.js) so "Jouw team" gets the
   full width instead of leaving half the layout empty. */
.rider-picker--closed {
    grid-template-columns: 1fr;
}

.rider-picker-column label {
    margin-top: 0;
}

#rider-search-input {
    margin-bottom: 10px;
}

.rider-list {
    border: 1px solid #ddd;
    border-radius: 8px;
    height: 420px;
    overflow-y: auto;
    background: #fafbfc;
    padding: 6px;
}

.rider-list-empty {
    color: #888;
    text-align: center;
    margin-top: 40px;
    padding: 0 10px;
}

.rider-team-group {
    margin-bottom: 8px;
}

.rider-team-heading {
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase;
    color: #888;
    padding: 6px 8px 2px;
}

.rider-option {
    display: block;
    width: 100%;
    text-align: left;
    background: white;
    color: #333;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    padding: 8px 10px;
    margin: 3px 0;
    font-size: 15px;
    cursor: pointer;
}

.rider-option:hover {
    background: #FCEBEA;
    border-color: var(--rojo);
}

.rider-selected-list {
    padding: 10px;
}

.rider-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    padding: 8px 10px;
    margin: 4px 0;
}

.rider-chip-index {
    color: #888;
    font-size: 0.85em;
    min-width: 18px;
}

.rider-chip-name {
    flex: 1;
}

.rider-chip-remove {
    background: none;
    border: none;
    color: #c62828;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    margin: 0;
}

.rider-chip--bench {
    background: #FFF9EC;
    border-color: var(--oro);
}

.rider-bench-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 4px;
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--oro);
}

.rider-bench-divider::after {
    content: "";
    flex: 1;
    border-top: 1px dashed var(--oro);
}

.rider-chip-move {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rider-chip-move-up,
.rider-chip-move-down {
    background: none;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #555;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 5px;
    margin: 0;
}

.rider-chip-move-up:hover:not(:disabled),
.rider-chip-move-down:hover:not(:disabled) {
    background: #f0f0f0;
    border-color: #bbb;
}

.rider-chip-move-up:disabled,
.rider-chip-move-down:disabled {
    opacity: 0.3;
    cursor: default;
}

.rider-chip-swap {
    background: none;
    border: 1px solid var(--verde);
    border-radius: 3px;
    color: var(--verde);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 7px;
    margin: 0;
}

.rider-chip-swap:hover {
    background: #EAF6EE;
    border-color: var(--verde);
}

.rider-chip-swap[aria-expanded="true"] {
    background: var(--verde);
    color: white;
}

.rider-swap-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    background: #FAFAFA;
    border: 1px dashed #ccc;
    border-radius: 5px;
    padding: 8px 10px;
    margin: -2px 0 4px;
}

.rider-swap-picker-label {
    flex-basis: 100%;
    font-size: 0.85em;
    color: #666;
    margin-bottom: 2px;
}

.rider-swap-option {
    background: white;
    border: 1px solid var(--verde);
    color: var(--verde);
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 14px;
    cursor: pointer;
}

.rider-swap-option:hover {
    background: var(--verde);
    color: white;
}

.rider-swap-cancel {
    background: none;
    border: 1px solid #ccc;
    color: #777;
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 14px;
    cursor: pointer;
}

.rider-swap-cancel:hover {
    background: #eee;
    border-color: #aaa;
}

@media (max-width: 700px) {

    .rider-picker {
        grid-template-columns: 1fr;
    }

    .rider-list {
        height: 300px;
    }

}

/* ---------- Riders table ---------- */

th.sortable {
    cursor: pointer;
    user-select: none;
}

th.sortable:hover {
    background: var(--rojo-oscuro);
}

#rider-search {
    max-width: 400px;
}

/* ---------- Teams page ---------- */

.team-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 18px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Briefly applied by scrollToPendingTeam() in teams.js when arriving via a
   participant link from the Stand page - fades back out on its own via the
   transition above once the class is removed. */
.team-card--highlight {
    border-color: var(--oro);
    box-shadow: 0 0 0 3px rgba(227, 161, 0, 0.3);
}

.team-card h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 10px 0;
}

.team-total {
    color: var(--rojo);
    font-size: 0.9em;
}

.team-riders {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px 20px;
}

.team-riders li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed #eee;
    padding: 4px 0;
}

.points-tag {
    color: #666;
    font-size: 0.85em;
    font-weight: bold;
}

.team-bench-heading {
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--oro);
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--oro);
}

.team-riders--bench li {
    color: #777;
}

/* Manually flagged in state.json's abandoned_riders list (see teams.js) -
   struck through wherever that rider shows up on this page, active,
   bench, or in the ownership overview table below. */
.rider-abandoned {
    text-decoration: line-through;
    opacity: 0.55;
}

.entries-counter {
    font-weight: bold;
    color: var(--rojo);
    font-size: 1.1em;
}

.swap-badge {
    display: inline-block;
    background: var(--oro);
    color: var(--tinta);
    font-size: 0.68em;
    font-weight: bold;
    padding: 1px 7px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}

.points-tag-secondary {
    font-size: 0.85em;
    color: #999;
    margin-left: 4px;
}

/* ---------- Standings page ---------- */

#stage-select {
    max-width: 250px;
    margin-bottom: 20px;
}

/* ---------- Homepage: hero image ---------- */

.home-hero-wrap {
    position: relative;
    width: 100%;
    line-height: 0;
    border-radius: 14px;
    overflow: hidden;
}

.home-hero-image {
    display: block;
    width: 100%;
    height: auto;
}

.home-hero-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: min(640px, 88%);
    padding: 44px 52px;
    background: rgba(13, 10, 7, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 12px;
    text-align: center;
    line-height: 1.5;
}

.home-hero-eyebrow {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 12px;
    color: var(--oro);
    margin: 0 0 10px;
}

.home-hero-title {
    margin: 0 0 12px;
    font-size: 34px;
    line-height: 1.2;
    color: white;
    text-transform: uppercase;
}

.home-hero-sub {
    font-size: 16px;
    color: #F2EFE8;
    margin: 0;
}

@media (max-width: 700px) {

    .home-hero-message {
        padding: 18px 22px;
    }

    .home-hero-title {
        font-size: 19px;
    }

    .home-hero-sub {
        font-size: 12px;
    }

    .home-hero-eyebrow {
        font-size: 10px;
    }

}

/* ---------- Rules: stage scoring ---------- */

.scoring-card h2 {
    margin-top: 0;
}

.scoring-intro {
    color: #4b463e;
    max-width: 640px;
}

.scoring-subhead {
    margin: 34px 0 6px;
    padding-top: 18px;
    border-top: 1px solid #eee;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 0.03em;
    color: var(--rojo);
}

.scoring-card h3.scoring-subhead:first-of-type {
    margin-top: 20px;
    padding-top: 0;
    border-top: none;
}

.scoring-note {
    color: #4b463e;
    font-size: 14.5px;
    margin: 0 0 14px;
    max-width: 640px;
}

.scoring-table {
    max-width: 560px;
    margin-bottom: 6px;
}

.scoring-table td:first-child {
    font-family: var(--font-body);
    font-weight: 600;
}

.scoring-table td {
    font-family: var(--font-mono);
}

.scoring-table td.rider-name {
    font-family: var(--font-body);
    font-weight: normal;
}

/* Jersey colors switch based on data/settings.json's "whichGt" value,
   applied as a body class (gt-lav / gt-tdf / gt-gdi) by rules.js.
   Falls back to the Vuelta (lav) colors if no gt-* class is present yet
   (e.g. briefly, before rules.js finishes fetching settings.json). */

.scoring-table th.col-leader,
.jersey-chip--leader {
    background: var(--rojo);
}

.scoring-table th.col-mountain,
.jersey-chip--mountain {
    background: var(--azul-lunares);
}

.scoring-table th.col-sprint,
.jersey-chip--sprint {
    background: var(--verde);
}

.scoring-table th.col-young,
.jersey-chip--young {
    background: var(--oro);
}

body.gt-tdf .scoring-table th.col-leader,
body.gt-tdf .jersey-chip--leader {
    background: var(--tdflead);
    color: var(--tinta); /* bright yellow needs dark text to stay legible */
}

body.gt-tdf .scoring-table th.col-mountain {
    background-color: #FFFFFF;
    background-image: radial-gradient(var(--tdfmont) 34%, transparent 36%);
    background-size: 12px 12px;
    color: var(--tinta);
}

body.gt-tdf .jersey-chip--mountain {
    background-color: #FFFFFF;
    background-image: radial-gradient(var(--tdfmont) 34%, transparent 36%);
    background-size: 16px 16px;
    color: var(--tinta);
}

body.gt-tdf .scoring-table th.col-sprint,
body.gt-tdf .jersey-chip--sprint {
    background: var(--tdfsprint);
}

body.gt-tdf .scoring-table th.col-young,
body.gt-tdf .jersey-chip--young {
    background: var(--tdfyoung);
    color: var(--tinta); /* white jersey needs dark text/points to stay legible */
    border: 2px solid rgba(0,0,0,0.25); /* thicker so it reliably wins over border-collapse; white would otherwise blend into the page */
}

body.gt-gdi .scoring-table th.col-leader,
body.gt-gdi .jersey-chip--leader {
    background: var(--girolead);
}

body.gt-gdi .scoring-table th.col-mountain,
body.gt-gdi .jersey-chip--mountain {
    background: var(--giromont);
    color: var(--tinta); /* light blue needs dark text to stay legible */
}

body.gt-gdi .scoring-table th.col-sprint,
body.gt-gdi .jersey-chip--sprint {
    background: var(--girosprint);
}

body.gt-gdi .scoring-table th.col-young,
body.gt-gdi .jersey-chip--young {
    background: var(--giroyoung);
    color: var(--tinta);
    border: 2px solid rgba(0,0,0,0.25); /* thicker so it reliably wins over border-collapse; white would otherwise blend into the page */
}

/* Vuelta mountain jersey ("maillot de lunares") is a polka-dot pattern too,
   just blue instead of red and with noticeably bigger, chunkier dots than
   the Tour version - real photos of the jersey confirm this. Same
   radial-gradient trick as gt-tdf above, just bigger tiles + fatter dot
   stop-percentages. */

body.gt-lav .scoring-table th.col-mountain {
    background-color: #FFFFFF;
    background-image: radial-gradient(var(--azul-lunares) 38%, transparent 40%);
    background-size: 21px 21px;
    color: var(--tinta);
}

body.gt-lav .jersey-chip--mountain {
    background-color: #FFFFFF;
    background-image: radial-gradient(var(--azul-lunares) 38%, transparent 40%);
    background-size: 28px 28px;
    color: var(--tinta);
}

/* Legibility: on both polka-dot mountain jerseys (TdF red, Vuelta blue) the
   dark text sits directly on top of the dot pattern, which breaks up the
   letterforms and makes it hard to read - a plain white halo behind the
   text fixes that without touching the dot pattern itself. Doesn't apply
   to gt-gdi's mountain jersey, which is still a flat solid color. */

body.gt-tdf .jersey-chip--mountain .jersey-chip-name,
body.gt-tdf .jersey-chip--mountain .jersey-chip-rider,
body.gt-tdf .jersey-chip--mountain .jersey-chip-points,
body.gt-tdf .scoring-table th.col-mountain,
body.gt-lav .jersey-chip--mountain .jersey-chip-name,
body.gt-lav .jersey-chip--mountain .jersey-chip-rider,
body.gt-lav .jersey-chip--mountain .jersey-chip-points,
body.gt-lav .scoring-table th.col-mountain {
    text-shadow:
        0 0 3px #fff,
        0 0 3px #fff,
        0 0 5px #fff,
        0 0 5px #fff;
}

.jersey-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    max-width: 640px;
}

.jersey-chip {
    border-radius: 8px;
    padding: 14px 16px;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid rgba(0,0,0,0.15);
}

.jersey-chip-name {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.03em;
    opacity: 0.9;
}

.jersey-chip-rider {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
}

.jersey-chip-points {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 18px;
}

/* ---------- Per-rider stage breakdown (expandable rows) ---------- */

/* Each rider in "Totale score per renner" is really two <tr>s (a summary
   row and a hidden detail row) - restripe explicitly per rider instead of
   relying on the generic tr:nth-child(even) rule, which would otherwise
   alternate per raw row instead of per rider. */
tr.rider-summary-row--even {
    background: #f8f9fa;
}

tr.rider-breakdown-row {
    background: transparent;
}

/* display: inline (not inline-flex) on purpose - an inline-flex button
   inside a table cell establishes its own flex formatting context, and
   depending on the active font's metrics that can make the browser compute
   a taller line box for this row than for a plain-text cell next to it
   (confirmed - this was making these rows visibly taller than the rest of
   the table). Plain inline content always sizes exactly like the
   surrounding text, so there's nothing left that can inflate row height. */
.rider-breakdown-toggle {
    display: inline;
    background: none;
    border: none;
    appearance: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-family: var(--font-body);
    line-height: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.rider-breakdown-toggle:hover {
    color: var(--rojo);
}

.rider-breakdown-arrow {
    display: inline-block;
    font-size: 11px;
    line-height: 1;
    color: #999;
    margin-right: 6px;
    transition: transform 0.15s ease;
}

.rider-summary-row--expanded .rider-breakdown-arrow {
    transform: rotate(90deg);
}

.rider-breakdown-row td {
    padding: 0 12px 12px;
    border-top: none;
}

.rider-breakdown-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 4px 12px;
    background: #fafbfc;
    border: 1px solid #eee;
    border-radius: 6px;
}

.rider-breakdown-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    font-family: var(--font-body);
    font-size: 14px;
}

.rider-breakdown-list li + li {
    border-top: 1px dashed #e5e5e5;
}

.rider-breakdown-detail {
    color: #888;
    font-weight: normal;
}

.rider-breakdown-points {
    font-family: var(--font-mono);
    font-weight: 600;
    white-space: nowrap;
    color: #2e7d32;
}

.rider-breakdown-empty {
    color: #888;
    font-style: italic;
    justify-content: flex-start;
}

@media (max-width: 700px) {

    .jersey-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* ---------- Teams page: rider ownership overview ---------- */

.rider-overview {
    margin-top: 30px;
}

.rider-overview-table {
    max-width: 900px;
}

.rider-overview-table th:nth-child(3),
.rider-overview-table td:nth-child(3),
.rider-overview-table th:nth-child(4),
.rider-overview-table td:nth-child(4) {
    text-align: right;
}