/* Sport-specific decorative backgrounds; status never depends on colour alone. */
.race-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #edf3ed;
    border-color: #d1dfd4;
}
.race-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-position: center;
    background-size: auto;
    pointer-events: none;
    opacity: .64;
}
.race-card[data-sport="trail"]::before {
    background-image: url('/assets/brand/race-trail-contours.png?v=20260911-1');
}
.race-card[data-sport="road"] {
    background: #eaf2ff;
    border-color: #cfdef2;
}
.race-card[data-sport="road"]::before {
    background-image: url('/assets/brand/race-road-four-lanes.svg?v=20260908-9');
    background-size: 100% 100%;
}
.race-card .muted {
    color: #465566;
}
.race-card .card-bottom {
    border-color: rgba(36,58,76,.16);
}
.race-card .row {
    align-items: flex-start;
}
.race-card .row>.muted {
    text-align: right;
    overflow-wrap: anywhere;
}
.race-card h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.race-card[data-registration-closed="true"] {
    background: #eceeee;
    border-color: #d5d9dc;
}
.race-card[data-registration-closed="true"]::before {
    filter: grayscale(1);
}
.race-card[data-registration-closed="true"] .muted {
    color: #596069;
}
.race-card[data-registration-closed="true"]:hover {
    border-color: #8f979e;
}
/* Keep sport badges distinct from the decorative card background. */
.race-card .badge-road,.race-card .badge-trail,.race-card .badge-closed {
    border: 1px solid currentColor;
    padding: 3px 9px;
}
.race-card-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}
.badge-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #d64133;
    background: #fff2ef;
    color: #c8382b;
    padding: 3px 9px;
    font-weight: 600;
    white-space: nowrap;
}
.badge-live i {
    display: block;
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
/* Member entries use the same sport artwork as public event cards. */
.my-entry-card .entry-status {
    border: 1px solid currentColor;
    padding: 3px 9px;
    background: rgba(255,255,255,.9);
    font-weight: 500;
}
.my-entry-card[data-sport="trail"] .entry-status {
    color: #32614c;
}
.my-entry-card[data-sport="road"] .entry-status {
    color: #365b9c;
}
/* Each race owns an independent, keyboard-accessible athlete search form. */
.race-search-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.race-search-card h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
}
.race-search-card .athlete-search-form {
    margin-top: auto;
}
.course-options {
    border: 0;
    padding: 0;
    margin: 0 0 16px;
    min-width: 0;
}
.course-options legend {
    font-weight: 500;
    margin-bottom: 8px;
}
.course-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.course-toggle {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}
.course-toggle input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
}
.course-toggle span {
    display: block;
    padding: 8px 12px;
    border: 1px solid #9caabd;
    border-radius: 8px;
    background: #fff;
    color: #27354b;
    font-size: 14px;
}
.course-toggle input:checked+span {
    background: var(--course-active,#245bff);
    color: #fff;
    border-color: var(--course-active,#245bff);
}
.course-toggle input:focus-visible+span {
    outline: 3px solid #172c59;
    outline-offset: 3px;
}
.race-search-card[data-sport="trail"] {
    --course-active: #32614c;
}
.race-search-card .button.secondary.athlete-rankings-link {
    background: var(--course-active,#245bff);
    border-color: var(--course-active,#245bff);
    color: #fff;
}
.athlete-search-form .button {
    width: 100%;
}
.athlete-search-form input[type="text"] {
    min-width: 0;
}
.athlete-search-actions {
    display: grid;
    grid-template-columns: minmax(0,1fr) 100px;
    align-items: end;
    gap: 10px;
    width: 100%;
    min-width: 0;
}
.athlete-search-actions-event {
    width: 310px;
    max-width: 100%;
}
.athlete-search-actions>label {
    min-width: 0;
    margin: 0;
}
.athlete-search-actions>.button {
    min-width: 0;
    padding-inline: 10px;
    margin: 0;
}
.athlete-search-actions>.athlete-rankings-link {
    grid-column: 1/-1;
}
/* Trail cards use event-ID assignments; road artwork remains sport-specific. */
.race-card[data-sport="trail"] {
    background-color: #f1f5f0;
}
.race-card[data-sport="trail"][data-card-kv]::before {
    background-color: #f1f5f0;
    background-blend-mode: multiply;
    background-image: var(--race-card-image);
    background-position: var(--race-card-x,center) var(--race-card-y,center);
    background-size: auto;
    background-repeat: no-repeat;
}