/* ===========================================================================
 * The calendar, drawn as a course.
 *
 * A season reads like a course on an orienteering map: a start triangle, then
 * the races as control circles joined by a connecting line, then a finish.
 * Races that count towards the standings are numbered circles; races outside
 * the league are plain dots, deliberately NOT small circles - a small circle
 * would read as a control drawn badly, a dot reads as a point on the way.
 *
 * Two rules are load-bearing, because breaking either is what an orienteer
 * would notice first:
 *   - the connecting line is SOLID (a dashed line is a marked route)
 *   - the line never touches a symbol, and the start triangle's apex points
 *     down the line at the first race
 *
 * The rail is absolutely positioned and overshoots each row by the row gap,
 * so the line runs continuously between cards while still stopping short of
 * every symbol. That is why the gap is real geometry rather than a symbol
 * painted over the line - which would also have been the wrong colour in
 * dark mode.
 * ======================================================================== */

.course {
    margin-bottom: var(--space-7);
}

.course-row {
    position: relative;
    display: flex;
    align-items: stretch;
    margin-bottom: var(--space-3);
}

.course-row:last-child {
    margin-bottom: 0;
}

/* The rail holds the symbol and the two line segments. It overshoots the row
   by the row gap so the line continues between cards. */
.course-rail {
    position: absolute;
    left: var(--course-symbol-inset);
    top: 0;
    bottom: calc(var(--space-3) * -1);
    width: var(--course-symbol-size);
    pointer-events: none;

    /* The symbols are drawn with currentColor so one declaration colours the
       triangle, the circles, the dots and the numbers together. */
    color: var(--course-symbol);
}

.course-row:last-child .course-rail {
    bottom: 0;
}

.course-spacer {
    width: var(--course-rail);
    flex-shrink: 0;
}

.course-line {
    position: absolute;
    left: calc(var(--course-symbol-size) / 2 - var(--course-stroke) / 2);
    width: var(--course-stroke);
    background-color: var(--course-line);
}

/* Above the symbol: from the top of the row to one gap short of it. */
.course-line-in {
    top: 0;
    height: calc(var(--course-symbol-top) - var(--course-gap));
}

/* Below the symbol: from one gap past it, to the bottom of the rail. */
.course-line-out {
    top: calc(var(--course-symbol-top) + var(--course-symbol-size) + var(--course-gap));
    bottom: 0;
}

.course-symbol {
    position: absolute;
    left: 0;
    top: var(--course-symbol-top);
    width: var(--course-symbol-size);
    height: var(--course-symbol-size);
}

/* The symbols carry a viewBox, so let them fill their box rather than keeping
   the width the markup happens to state. Without this they stayed 36px wide
   while --course-symbol-size shrank on narrow screens, and the connecting
   line ran 4px off the centre of every circle. */
.course-symbol svg,
.course-dot svg {
    display: block;
    width: 100%;
    height: 100%;
}

.course-number {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--course-symbol);
}

/* Start and finish: a label beside the symbol rather than a card. */
.course-marker {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 3.25rem;
    margin-bottom: var(--space-3);
}

.course-marker:last-child {
    margin-bottom: 0;
}

.course-marker .course-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.course-marker-start .course-symbol {
    top: 0.5rem;
    height: 2rem;
}

.course-marker-start .course-line-out {
    top: 2.875rem;
}

.course-marker-finish .course-rail {
    bottom: 0;
}

.course-marker-finish .course-line-in {
    height: 0.625rem;
}

.course-marker-finish .course-symbol {
    top: 1rem;
}

/* A race outside the league. Smaller, solid, and centred on the line.
   The offsets are derived from the dot's own tokens rather than written out,
   so the two gaps cannot drift apart from the symbol they belong to. */
.course-dot {
    position: absolute;
    left: 0;
    top: var(--course-dot-top);
    width: var(--course-symbol-size);
    height: var(--course-dot-size);
}

.course-row-aside .course-line-in {
    height: calc(var(--course-dot-top) - var(--course-gap));
}

.course-row-aside .course-line-out {
    top: calc(var(--course-dot-top) + var(--course-dot-size) + var(--course-gap));
}

/* ---------------------------------------------------------------------------
 * The race card
 * ------------------------------------------------------------------------ */
.race-card {
    flex-grow: 1;
    min-width: 0;
    background-color: var(--card-bg);
    border: var(--border-hair) solid var(--card-border);
    border-radius: var(--card-radius);
    padding: var(--space-4) var(--space-5);
}

.race-card-next {
    border-width: 2px;
    border-color: var(--color-accent);
    padding: calc(var(--space-4) - 1px) calc(var(--space-5) - 1px);
}

.race-head {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

/* Date and logo together: who is running this race, and when. Grouping them
   means the pair can turn into a column on a phone without the two ending up
   in different grid rows and drifting apart. */
.race-ident {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}

.race-date {
    width: 4.625rem;
    flex-shrink: 0;
    text-align: center;
}

.race-day {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    line-height: 1;
    color: var(--text-primary);
}

.race-month {
    display: block;
    margin-top: 3px;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

.race-date-unknown {
    font-size: var(--text-xs);
    line-height: 1.25;
    color: var(--text-faded);
}

.race-body {
    flex-grow: 1;
    min-width: 0;
}

.race-name {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    margin: 0;
}

.race-meta {
    margin-top: 3px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.race-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-3);
    flex-shrink: 0;
}

.race-badge {
    display: inline-block;
    margin-bottom: var(--space-2);
    padding: 3px var(--space-3);
    border-radius: var(--radius-pill);
    background-color: var(--color-accent);
    color: var(--text-on-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* A race that has happened recedes, but stays readable: the old stylesheet
   used lightslategray, which was 3.6:1 on white, and for most of the year
   most of this page is past races. */
.race-past .race-day,
.race-past .race-month,
.race-past .race-name,
.race-past .race-meta {
    color: var(--text-faded);
}

.race-past .race-name {
    color: var(--text-secondary);
}

.race-logo {
    width: 3.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.race-logo img {
    max-height: 34px;
    max-width: 100%;
    object-fit: contain;
}

/* ---------------------------------------------------------------------------
 * Results of a finished race: participant count, expanding to the podiums.
 * <details> rather than a JS toggle - native keyboard and screen-reader
 * support with no ARIA, and it works before the CDN script arrives.
 * ------------------------------------------------------------------------ */
.race-results {
    margin-top: var(--space-3);
    margin-left: calc(4.625rem + var(--space-5));
}

.race-results > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: var(--border-hair) solid var(--border-quiet);
    border-radius: var(--radius-pill);
    background-color: var(--surface-quiet);
    color: var(--color-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    cursor: pointer;
    list-style: none;
}

.race-results > summary::-webkit-details-marker {
    display: none;
}

.race-results > summary::after {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--duration-fast) var(--ease-out);
}

.race-results[open] > summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}


/* ---------------------------------------------------------------------------
 * Narrow screens. The course survives; the card stacks.
 * ------------------------------------------------------------------------ */
@media (max-width: 720px) {
    :root {
        --course-rail: 3.25rem;
        --course-symbol-size: 1.75rem;
        --course-symbol-inset: 0.25rem;
        --course-symbol-top: 1.125rem;
    }

    /* The logo moves under the date rather than taking a column of its own:
       on a phone those 40px come straight out of the race name, which was
       already wrapping to three lines. */
    .race-head {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--space-4);
    }

    .race-ident {
        flex-direction: column;
        align-items: center;
        gap: var(--space-2);
        width: 3.25rem;
    }

    .race-date {
        width: auto;
    }

    .race-logo {
        width: auto;
    }

    .race-logo img {
        max-height: 26px;
    }

    .race-body {
        flex: 1 1 0;
    }

    .race-aside {
        display: none;
    }

    .race-card-next .race-aside {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-top: var(--space-3);
    }

    .race-results {
        margin-left: 0;
    }


    .course-marker-start .course-symbol,
    .course-marker-finish .course-symbol {
        top: 0.5rem;
    }

    .course-marker-start .course-line-out {
        top: 2.25rem;
    }

    /* The derived rules above follow this on their own. */
    :root {
        --course-dot-top: 1.5rem;
    }
}