/* Races page: month calendar (grid on desktop / tablet, agenda under 700 px) + organisations banner.
   Colours only through the theme tokens (docs/THEME_SYSTEM.md); the value after the comma is the Grid fallback. */

.rc {
    --rc-live: var(--tl-accent, #ff1e6a);
    --rc-live-rgb: var(--tl-accent-rgb, 255, 30, 106);
    --rc-upcoming: var(--tl-info, #4da6ff);
    --rc-upcoming-rgb: var(--tl-info-rgb, 77, 166, 255);
    --rc-done: var(--tl-ok, #00ff88);
    --rc-done-rgb: var(--tl-ok-rgb, 0, 255, 136);
    --rc-cancelled: var(--tl-faint, rgba(255, 255, 255, 0.5));
    --rc-cancelled-rgb: var(--tl-ink-rgb, 255, 255, 255);
    --rc-line: var(--tl-line, rgba(255, 255, 255, 0.1));
    min-width: 0;
}

/* ── Organisations banner ── */
.rc-orgs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px; padding: 12px 16px; border-radius: var(--tl-r, 1rem); background: var(--tl-surface, rgba(255, 255, 255, 0.03)); border: 1px solid var(--rc-line); }
.rc-orgs__label { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 260px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--tl-muted, rgba(255, 255, 255, 0.7)); }
.rc-orgs__label i { color: var(--tl-accent-ink, #ff4d8a); }
.rc-orgs__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-orgchip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 14px; border-radius: var(--tl-r-chip, 9999px); background: rgba(var(--tl-accent-rgb, 255, 30, 106), .14); border: 1px solid rgba(var(--tl-accent-rgb, 255, 30, 106), .5); color: var(--tl-text, #fff); font-size: 13px; font-weight: 700; text-decoration: none; }
.rc-orgchip i { font-size: 11px; opacity: .75; }
.rc-orgchip:hover { color: var(--tl-text, #fff); border-color: var(--tl-accent, #ff1e6a); }
.rc-orgs__add { display: flex; align-items: center; gap: 8px; min-width: 0; margin-left: auto; }
.rc-select { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.rc-select select { appearance: none; -webkit-appearance: none; width: 240px; max-width: 100%; min-height: 40px; padding: 0 36px 0 16px; border-radius: var(--tl-r-chip, 9999px); background: var(--tl-field, rgba(255, 255, 255, 0.05)); color: var(--tl-text, #fff); border: 1px solid var(--tl-input-border, rgba(255, 255, 255, 0.2)); font: inherit; font-size: 13px; text-overflow: ellipsis; }
.rc-select select option { color: var(--tl-text, #111); background: var(--tl-surface, #fff); }
.rc-select i { position: absolute; right: 14px; font-size: 11px; color: var(--tl-muted, rgba(255, 255, 255, 0.7)); pointer-events: none; }
.rc-orgs__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: var(--tl-r-btn, 9999px); border: 1px solid var(--tl-line-strong, rgba(255, 255, 255, 0.3)); background: transparent; color: var(--tl-text, #fff); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.rc-orgs__btn:hover { background: rgba(var(--tl-ink-rgb, 255, 255, 255), .06); }

/* ── Toolbar ── */
.rc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 14px; }
.rc-nav { display: inline-flex; align-items: center; gap: 10px; }
.rc-navbtn, .rc-today { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: var(--tl-r-chip, 9999px); border: 1px solid var(--tl-line-strong, rgba(255, 255, 255, 0.3)); background: transparent; color: var(--tl-text, #fff); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-sizing: border-box; }
.rc-navbtn:hover, .rc-today:hover { background: rgba(var(--tl-ink-rgb, 255, 255, 255), .06); }
.rc-navbtn[disabled] { opacity: .35; cursor: default; }
.rc-title { margin: 0; min-width: 11ch; text-align: center; font: italic 800 26px/1 var(--tl-font-display, inherit); text-transform: uppercase; color: var(--tl-display, var(--tl-text, #fff)) !important; }
.rc-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 0 auto; padding: 0; list-style: none; font-size: 12px; font-weight: 600; color: var(--tl-muted, rgba(255, 255, 255, 0.7)); }
.rc-legend li { display: inline-flex; align-items: center; gap: 7px; }
.rc-legend i { width: 12px; height: 12px; border-radius: 4px; background: var(--rc-c); }
.rc-live { --rc-c: var(--rc-live); --rc-c-rgb: var(--rc-live-rgb); }
.rc-upcoming { --rc-c: var(--rc-upcoming); --rc-c-rgb: var(--rc-upcoming-rgb); }
.rc-done { --rc-c: var(--rc-done); --rc-c-rgb: var(--rc-done-rgb); }
.rc-cancelled { --rc-c: var(--rc-cancelled); --rc-c-rgb: var(--rc-cancelled-rgb); }

/* Without JavaScript: every month is listed with its own title, no navigation */
.rc:not(.is-js) .rc-nav, .rc:not(.is-js) .rc-today { display: none; }
.rc.is-js .rc-month-title { display: none; }
.rc:not(.is-js) .rc-count { display: none; }
.rc-month { margin: 0 0 30px; }
.rc.is-js .rc-month { margin: 0; }
.rc-month[hidden] { display: none; }
.cal-month-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--rc-line); }
.cal-month-label { margin: 0; font: italic 800 26px/1 var(--tl-font-display, inherit); text-transform: uppercase; color: var(--tl-display, var(--tl-text, #fff)) !important; }
.cal-month-count, .rc-count { font-size: 12px; font-weight: 600; color: var(--tl-faint, rgba(255, 255, 255, 0.5)); }
.rc-count { margin: 0 0 10px; }
.cal-empty { font-size: 13px; color: var(--tl-faint, rgba(255, 255, 255, 0.5)); padding: 2px 0 10px; }

/* ── Month grid ── */
.rc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--rc-line); border-radius: var(--tl-r, 1rem); overflow: hidden; background: var(--tl-surface, rgba(255, 255, 255, 0.03)); }
.rc-dow { padding: 10px 6px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tl-muted, rgba(255, 255, 255, 0.7)); background: var(--tl-surface-2, rgba(255, 255, 255, 0.05)); border-bottom: 1px solid var(--rc-line); }
.rc-cell { position: relative; min-width: 0; min-height: 118px; padding: 6px 0 8px; border-right: 1px solid var(--rc-line); border-bottom: 1px solid var(--rc-line); }
.rc-cell:nth-child(7n) { border-right: 0; }
.rc-cell.rc-we:not(.rc-out) { background: rgba(var(--tl-ink-rgb, 255, 255, 255), .025); }
.rc-cell.rc-out { background: rgba(var(--tl-shade-rgb, 0, 0, 0), .12); }
.rc-daynum { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; margin: 0 0 4px 6px; padding: 0 6px; border-radius: 13px; font-size: 13px; font-weight: 700; color: var(--tl-muted, rgba(255, 255, 255, 0.7)); box-sizing: border-box; }
.rc-todaycell .rc-daynum { background: var(--tl-accent-fill, #ff1e6a); color: var(--tl-on-accent, #fff); }
.rc-chips { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.rc-chip { display: flex; align-items: center; min-width: 0; height: 22px; margin: 0 5px; padding: 0 8px; border-radius: 6px; background: rgba(var(--rc-c-rgb), .2); border-left: 3px solid var(--rc-c); color: var(--tl-text, #fff); font-size: 12px; font-weight: 600; line-height: 1; text-decoration: none; box-sizing: border-box; }
a.rc-chip:hover { background: rgba(var(--rc-c-rgb), .34); color: var(--tl-text, #fff); }
.rc-chip.rc-ext { border-left-style: dashed; background: rgba(var(--rc-c-rgb), .1); }
.rc-chip.rc-cancelled .rc-txt { text-decoration: line-through; opacity: .7; }
.rc-txt { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* A race that goes on over several days: one bar across the cells */
.rc-chip:not(.rc-first) { margin-left: 0; border-left-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 10px; }
.rc-chip:not(.rc-last) { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rc-chip.rc-cont .rc-txt { visibility: hidden; }
.rc-chip.rc-gap { background: none; border: 0; pointer-events: none; }
.rc-chip.rc-extra { display: none; }
.rc-cell.is-open .rc-chip.rc-extra { display: flex; }
.rc-more { margin: 1px 6px 0; padding: 0; background: none; border: 0; color: var(--tl-accent-ink, #ff4d8a); font: inherit; font-size: 12px; font-weight: 700; text-align: left; cursor: pointer; }
.rc-more:hover { text-decoration: underline; }
.rc-chip:focus-visible, .rc-more:focus-visible, .rc-navbtn:focus-visible, .rc-today:focus-visible { outline: 2px solid var(--tl-accent, #ff1e6a); outline-offset: 1px; }

/* ── Agenda (phones) ── */
.rc-agenda { display: none; }
.rc-agday { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rc-line); }
.rc-agdate { flex: 0 0 52px; text-align: center; padding: 8px 0; border-radius: var(--tl-r-sm, 12px); background: var(--tl-surface-2, rgba(255, 255, 255, 0.06)); align-self: flex-start; }
.rc-agdate b { display: block; font: italic 800 22px/1 var(--tl-font-display, inherit); color: var(--tl-text, #fff); }
.rc-agdate span { display: block; margin-top: 4px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tl-accent-ink, #ff4d8a); }
.rc-agday.rc-todaycell .rc-agdate { background: var(--tl-accent-fill, #ff1e6a); }
.rc-agday.rc-todaycell .rc-agdate b, .rc-agday.rc-todaycell .rc-agdate span { color: var(--tl-on-accent, #fff); }
.rc-aglist { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rc-agrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 10px 12px; border-radius: var(--tl-r-sm, 12px); background: rgba(var(--rc-c-rgb), .12); border-left: 4px solid var(--rc-c); color: var(--tl-text, #fff); text-decoration: none; }
.rc-agrow.rc-ext { border-left-style: dashed; }
a.rc-agrow:hover { background: rgba(var(--rc-c-rgb), .2); color: var(--tl-text, #fff); }
.rc-agmain { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rc-agmain strong { font-size: 15px; overflow-wrap: anywhere; }
.rc-agmain small { font-size: 12px; color: var(--tl-muted, rgba(255, 255, 255, 0.7)); overflow-wrap: anywhere; }
.rc-agmain small i { font-size: 10px; opacity: .7; }
.rc-agrow .tl-status { flex-shrink: 0; }

@media (max-width: 699px) {
    .rc-grid { display: none; }
    .rc-agenda { display: block; }
    .rc-title { font-size: 20px; min-width: 0; flex: 1; }
    .rc-nav { flex: 1 1 100%; }
    .rc-legend { margin-left: 0; }
    .rc-orgs__add { width: 100%; margin-left: 0; }
    .rc-select { flex: 1; }
    .rc-select select { width: 100%; }
    .rc-agrow .tl-status__label { display: none; }
    .rc-agrow .tl-status { padding: 6px; }
}
@media (min-width: 700px) and (max-width: 1000px) {
    .rc-cell { min-height: 104px; }
    .rc-chip { font-size: 11px; padding: 0 6px; }
}