/* My calendar: a month grid (wide screens) over the month's list; a phone gets the list only. */
.cal-page .page-lede { margin: 0 0 var(--s3, 12px); font-size: var(--fs-small); color: var(--text-3); }
.cal-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 var(--s3, 12px); }
.cal-nav h2 { flex: 1 1 auto; margin: 0; font-size: var(--v2-fs-lg, 20px); }
.cal-grid { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; margin: 0 0 var(--s5, 24px); background: none; }
.cal-grid th { position: static; padding: 6px; border: 0; background: none; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); text-align: left; }
.cal-grid td { height: 96px; padding: 4px; vertical-align: top; border: 1px solid var(--line-2, rgba(127, 127, 127, .25)); background: var(--v2-panel, transparent); overflow: hidden; }
.cal-grid td.is-out { background: transparent; }
.cal-grid td.is-out .cal-d { color: var(--text-3); opacity: .6; }
.cal-grid td.is-today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-d { display: block; margin: 0 0 3px; font-size: var(--fs-small); font-weight: 650; font-variant-numeric: tabular-nums; }
.cal-ev { display: block; margin: 0 0 2px; padding: 2px 5px; border-left: 3px solid var(--accent); border-radius: var(--v2-r-sm, 3px); background: var(--v2-wash, rgba(var(--accent-rgb), .13));
    color: var(--text-hi, var(--text)); font-size: var(--fs-micro); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.cal-ev:hover, .cal-ev:focus-visible { text-decoration: underline; }
.cal-ev.cal-official, .cal-item.cal-official { border-left-color: var(--text-3); }
.cal-ev.cal-official { background: var(--v2-overlay, rgba(127, 127, 127, .12)); }
.is-past { opacity: .55; }
.cal-list, .cal-list ul { margin: 0; padding: 0; list-style: none; }
.cal-lday { margin: var(--s4, 16px) 0 6px; font-size: var(--fs-small); font-weight: 700; color: var(--text-2, var(--text)); }
.cal-lday.is-today { color: var(--accent); }
.cal-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 6px; padding: 8px 12px; border: 1px solid var(--line-2, rgba(127, 127, 127, .25));
    border-left: 3px solid var(--accent); border-radius: var(--v2-r-md, 6px); background: var(--v2-panel, transparent); }
.cal-when { flex: none; min-width: 120px; font-size: var(--fs-small); font-weight: 650; font-variant-numeric: tabular-nums; }
.cal-what { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.cal-what small { display: block; font-size: var(--fs-micro); color: var(--text-3); }
.cal-h2 { margin: 0 0 4px; font-size: var(--fs-small); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.cal-page a.v2-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.cal-page .v2-btn.is-on { border-color: var(--accent); color: var(--accent); }
.cal-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Next up: the next race (or the running one, LIVE) with its countdown. */
.cal-next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 var(--s4, 16px); padding: 12px 16px; border: 1px solid var(--line-2, rgba(127, 127, 127, .25));
    border-left: 4px solid var(--accent); border-radius: var(--v2-r-md, 6px); background: var(--v2-panel, transparent); }
.cal-next-tag { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--v2-wash, rgba(var(--accent-rgb), .13)); color: var(--accent); font-size: var(--fs-micro); font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.cal-next.is-live .cal-next-tag { background: var(--accent); color: var(--bg, #000); }
.cal-next-what { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.cal-next-what a { font-weight: 700; }
.cal-next-what small { display: block; font-size: var(--fs-micro); color: var(--text-3); }
.cal-next-count { flex: none; font-size: var(--v2-fs-lg, 20px); font-weight: 700; font-variant-numeric: tabular-nums; }
/* Grid extras: day numbers that open the list, a race running on from an earlier day, the LMU overlay. */
button.cal-d { display: block; padding: 0 4px; margin: 0 0 3px -4px; line-height: inherit; border: 0; border-radius: var(--v2-r-sm, 3px); background: none; color: inherit; font: inherit; font-size: var(--fs-small); font-weight: 650; cursor: pointer; }
button.cal-d:hover, button.cal-d:focus-visible { background: var(--v2-wash, rgba(var(--accent-rgb), .13)); color: var(--accent); }
.cal-ev.is-cont { border-left-style: dashed; background: transparent; box-shadow: inset 0 0 0 1px var(--v2-wash, rgba(var(--accent-rgb), .2)); }
.cal-ev.cal-lmu { border-left: 2px dotted var(--text-3); background: transparent; color: var(--text-3); }
.cal-more { display: block; padding: 0 5px; border: 0; background: none; color: var(--text-3); font: inherit; font-size: var(--fs-micro); cursor: pointer; }
.cal-more:hover, .cal-more:focus-visible { color: var(--accent); text-decoration: underline; }
.cal-lhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cal-lhead .cal-h2 { flex: 1 1 auto; margin: 0; }
.cal-lgroup { padding-left: 0; border-radius: var(--v2-r-md, 6px); }
.cal-lgroup.is-today { padding-left: 8px; border-left: 2px solid var(--accent); }
.cal-lday { scroll-margin-top: 80px; }
.cal-lday:focus { outline: none; }
@keyframes cal-flash { from { background: var(--v2-wash, rgba(var(--accent-rgb), .25)); } to { background: transparent; } }
.cal-lgroup.is-flash { animation: cal-flash 1.6s ease-out; }
.cal-item.cal-lmu { border-left: 2px dotted var(--text-3); background: transparent; }
.cal-item.cal-lmu .cal-what a { color: var(--text-2, var(--text)); }
.cal-lmore { margin: 0 0 6px; }
@media (prefers-reduced-motion: reduce) { .cal-lgroup.is-flash { animation: none; outline: 2px solid var(--accent); } }
@media (max-width: 640px) {
    .cal-grid { display: none; }
    .cal-nav h2 { flex-basis: 100%; }
    .cal-item .v2-btn { flex: 1 1 100%; }
    .cal-next .v2-btn, .cal-nav #calLmu { flex: 1 1 100%; }
    .cal-nav .v2-btn { flex: 1 1 0; }
}