.join-game {
    display: none !important;
}

/* The Highlights page is one card: the title band and the feed share
   a column, an edge and the board's pale head strip, and the feed below
   reads as a timeline whose events are grouped by day. */
main.event-board-page {
    --feed-width: min(100% - 2rem, 860px);
    --feed-radius: var(--lwc-radius-lg, 12px);
    --feed-pad-x: var(--lwc-space-5, 24px);
    --feed-clearance: var(--lwc-space-5, 24px);
}

.event-board-heading,
.event-board-page .events-board {
    box-sizing: border-box;
}

.event-board-heading {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lwc-space-3, 12px) var(--lwc-space-4, 16px);
    margin: 0 auto;
    /* The page scrolls this heading to the sticky header; the clear
       strip above the band keeps the title off it. */
    padding: calc(var(--feed-clearance) + var(--lwc-space-4, 16px)) var(--feed-pad-x) var(--lwc-space-4, 16px);
}

.event-board-heading::before {
    content: "";
    position: absolute;
    inset: var(--feed-clearance) 0 0;
    z-index: -1;
    border: 1px solid var(--events-border);
    border-bottom: 0;
    border-radius: var(--feed-radius) var(--feed-radius) 0 0;
    background: var(--events-header-bg);
}

.event-board-heading h1 {
    flex: 1 1 max-content;
    min-width: 0;
    margin: 0;
    color: var(--events-header-ink);
    font-size: clamp(1.6rem, 3.2vw, 2.15rem);
    line-height: 1.1;
    text-align: left;
}

.event-board-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    max-width: 100%;
    gap: var(--lwc-space-2, 8px);
    margin-left: auto;
}

.event-feed-link,
.event-push-toggle {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: var(--lwc-space-2, 8px);
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
    border: 1px solid var(--lwc-border, #b7c7cd);
    border-radius: var(--lwc-radius-md, 8px);
    background: var(--lwc-surface, #fff);
    color: var(--secondary-color, #087685);
    font: inherit;
    font-size: var(--lwc-type-sm, .875rem);
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--lwc-duration-fast, 140ms) var(--lwc-ease, ease), border-color var(--lwc-duration-fast, 140ms) var(--lwc-ease, ease);
}

.event-feed-link { padding: 0 var(--lwc-space-4, 16px); }
.event-push-toggle { width: 44px; height: 44px; padding: 0; cursor: pointer; }
.event-push-toggle[hidden] { display: none; }
.event-feed-link:hover,
.event-push-toggle:hover { border-color: var(--secondary-color, #087685); background: var(--lwc-surface-muted, #eef2f5); }
.event-push-toggle[aria-pressed="true"] { background: var(--secondary-color, #087685); color: var(--lwc-on-accent, #fff); border-color: var(--secondary-color, #087685); }
.event-feed-link:focus-visible,
.event-push-toggle:focus-visible { outline: 2px solid var(--secondary-color, #087685); outline-offset: 2px; }
.event-push-toggle:disabled { opacity: .55; cursor: default; }

/* Notification feedback is part of the band, under its title. */
.event-push-status {
    flex: 1 0 100%;
    margin: 0;
    color: var(--events-header-ink);
    font-size: var(--lwc-type-sm, .875rem);
    text-align: left;
}
.event-push-status:empty { display: none; }

.event-board-heading,
.event-board-page .events-board {
    width: var(--feed-width);
}

.event-board-page .events-board {
    --event-date-column: 4.5rem;
    /* Month headings stop under the site's sticky bar. */
    --event-month-top: max(3.25rem, var(--site-sticky-height, 0px));
    --event-avatar-target: 44px;
    --event-avatar-inset: 0px;
    --event-avatar-gap: var(--lwc-space-3, 12px);
    --event-avatar-size: 32px;
    --event-message-start: calc(var(--event-date-column) + var(--event-avatar-column));
    /* The timeline passes through the centre of every portrait. */
    --event-rail-x: calc(var(--event-date-column) + var(--event-avatar-inset) + var(--event-avatar-target) / 2 - 1px);
    --event-rail: linear-gradient(var(--events-border), var(--events-border));
    flex-grow: 0;
    margin: 0 auto;
    /* Clipped, not hidden, so month headings can stick to the viewport. */
    overflow: clip;
    border: 1px solid var(--events-border);
    border-radius: 0 0 var(--feed-radius) var(--feed-radius);
    box-shadow: var(--lwc-shadow-sm, 0 1px 2px rgba(15,23,42,.08));
}

.event-board-page .events-board thead,
.event-board-page .events-board colgroup {
    display: none;
}

.event-board-page .events-board table,
.event-board-page .events-board tbody {
    display: block;
    width: 100%;
    padding: 0;
}

.event-board-page .events-board tbody {
    padding-block: 0;
}

.event-board-page .events-board tbody:last-of-type {
    padding-bottom: var(--lwc-space-3, 12px);
}

/* Months are chapters: each opens with a heading band in the title
   band's colours that stays in view while its events scroll past. */
.event-board-page .events-board tbody tr.events-month-row {
    display: block;
    position: sticky;
    top: var(--event-month-top);
    z-index: 3;
}

.event-board-page .events-board tbody tr.events-month-row > th {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 40px;
    padding: var(--lwc-space-2, 8px) var(--feed-pad-x);
    border-block: 1px solid var(--events-border);
    background: var(--events-header-bg);
    color: var(--events-header-ink);
    font-size: var(--lwc-type-xs, .75rem);
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.3;
    text-align: left;
    text-transform: uppercase;
}

/* Keyboard scrolling already clears the site bar; also clear the chapter band. */
.event-board-page .events-board tbody[data-month] :is(a, button) {
    scroll-margin-block-start: calc(var(--event-month-height, 40px) + 6px);
}

.event-board-page .events-board tbody:first-of-type tr.events-month-row:first-child > th {
    border-top: 0;
}

.event-board-page .events-board tbody tr.events-month-row + tr.main-row {
    --timeline-row-top: var(--lwc-space-2, 8px);
    padding-top: var(--timeline-row-top);
}

/* Loading shows the first heading band before the first events. */
.event-board-page .events-board[aria-busy="true"] tbody:has(> .events-skeleton-row)::before {
    content: "";
    display: block;
    height: 40px;
    border-bottom: 1px solid var(--events-border);
    background:
        linear-gradient(var(--events-border), var(--events-border)) var(--feed-pad-x) 50% / 7rem .6rem no-repeat,
        var(--events-header-bg);
}

/* Rows: date, portrait on the rail, message. */
.event-board-page .events-board tbody tr.main-row,
.event-board-page .events-board tbody tr.events-skeleton-row {
    --timeline-row-top: 2px;
    display: grid;
    grid-template-columns: var(--event-date-column) var(--event-avatar-column) minmax(0, 1fr);
    grid-template-areas: "date avatar message";
    align-items: center;
    height: auto;
    min-height: 52px;
    padding: var(--timeline-row-top) var(--feed-pad-x) 2px 0;
    box-sizing: border-box;
}

.event-board-page .events-board tbody tr.main-row > td,
.event-board-page .events-board tbody tr.events-skeleton-row > td {
    display: block;
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    height: auto;
    padding: 0;
}

.event-board-page .events-board tbody tr > td.col-avatar {
    grid-area: avatar;
    padding: 0 var(--event-avatar-gap) 0 var(--event-avatar-inset);
}

.event-board-page .events-board tbody tr > td.event-message { grid-area: message; padding: 0; }

.event-board-page .events-board tbody tr > td.col-date {
    grid-area: date;
    width: auto;
    padding: 0 var(--lwc-space-3, 12px) 0 var(--feed-pad-x);
    color: var(--events-muted);
    font-size: var(--lwc-type-xs, .75rem);
    line-height: 1.25;
    text-align: left;
    font-variant-numeric: tabular-nums;
    white-space: normal;
    overflow-wrap: anywhere;
}

.event-board-page .events-board tbody td.event-message .event-message-cell {
    display: block;
    min-height: 0;
    padding-block: var(--lwc-space-2, 8px);
    font-size: var(--lwc-type-body, 1rem);
    line-height: 1.5;
    white-space: normal;
}

.event-board-page .events-board tbody td.event-message .event-message-cell .rank-badge,
.event-board-page .events-board tbody td.event-message .event-message-cell .badge-class,
.event-board-page .events-board tbody td.event-message .event-message-cell .badge-chip,
.event-board-page .events-board tbody td.event-message .event-message-cell .more-link,
.event-board-page .events-board tbody td.event-message .event-message-cell .event-measurement strong {
    white-space: nowrap;
}

/* One quiet surface: days group events, not alternating stripes. */
.event-board-page .events-board table tbody tr,
.event-board-page .events-board table tbody tr.zebra-even,
.event-board-page .events-board table tbody tr.zebra-odd {
    background-color: transparent;
    box-shadow: none;
    transform: none;
}

.event-board-page .events-board table tbody tr.main-row,
.event-board-page .events-board table tbody tr.events-skeleton-row,
.event-board-page .events-board table tbody tr.custom-event-details {
    /* Two layers: the month's rail, and the hairline that opens a new day. */
    background-image: var(--event-rail-image, var(--event-rail)), var(--event-day-rule, none);
    background-repeat: no-repeat;
    background-position: var(--event-rail-x) var(--event-rail-y, 0), var(--event-message-start) 0;
    background-size: 2px var(--event-rail-h, 100%), calc(100% - var(--event-message-start) - var(--feed-pad-x)) 1px;
}

.event-board-page .events-board table tbody tr.main-row:hover,
.event-board-page .events-board table tbody tr.main-row:focus-within,
.event-board-page .events-board table tbody tr.custom-event-row:has(+ tr.custom-event-details:hover) {
    background-color: var(--events-hover-bg);
}

/* Each month has its own rail, from its newest portrait to its oldest. */
.event-board-page .events-board table tbody tr.events-skeleton-row:first-child,
.event-board-page .events-board table tbody tr.main-row.month-start {
    --event-rail-y: 100%;
    --event-rail-h: calc(50% - (var(--timeline-row-top, 2px) - 2px) / 2);
}

.event-board-page .events-board table tbody tr.events-skeleton-row:last-child,
.event-board-page .events-board table tbody tr.main-row.month-end {
    --event-rail-y: 0px;
    --event-rail-h: calc(50% + (var(--timeline-row-top, 2px) - 2px) / 2);
}

.event-board-page .events-board table tbody tr.main-row.month-start.month-end,
.event-board-page .events-board table tbody tr.main-row.month-end + tr.custom-event-details {
    --event-rail-image: none;
}

/* The day leads its events in ink; its month is the chapter's heading. */
.event-board-page .events-board tbody tr.main-row > td.col-date {
    color: var(--events-text);
    opacity: 1;
}

@media (min-width: 601px) {
    .event-board-page .events-board td.col-date .event-date-day {
        display: block;
        font-size: 1.375rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -.01em;
    }

    .event-board-page .events-board td.col-date .event-date-rest,
    .event-board-page .events-board tbody tr.main-row.day-repeat > td.col-date .event-date-day {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

.event-board-page .events-board tbody tr.main-row.day-repeat > td.col-date {
    color: var(--events-muted);
}

/* Portraits sit on the rail with a ring of the card around them. */
.event-board-page .events-board .avatar,
.event-board-page .events-board .avatar-fallback,
.event-board-page .events-board .avatar-link:is(:hover, :focus) .avatar,
.event-board-page .events-board .avatar-link:is(:hover, :focus) .avatar-fallback,
.event-board-page .events-board .donation-gift-avatar,
.event-board-page .events-board .milestone-people-avatar {
    width: var(--event-avatar-size);
    height: var(--event-avatar-size);
    box-sizing: border-box;
    box-shadow: 0 0 0 4px var(--card-bg);
}

.event-board-page .events-board .avatar-fallback {
    font-size: min(.7rem, 14px);
    line-height: 1;
    white-space: nowrap;
}

.event-board-page .events-board .donation-gift-avatar i,
.event-board-page .events-board .milestone-people-avatar i {
    font-size: min(1rem, 16px);
}

.event-board-page .events-board .athlete-td {
    min-height: 0;
    padding: 0;
}

/* Announcements: the chevron belongs to its title, and the opened
   story is a panel that starts where the message starts. */
.event-board-page .events-board .custom-event-title {
    font-weight: 700;
}

.event-board-page .events-board table tbody tr.custom-event-row:not(.custom-event-no-details) td.event-message .event-message-cell {
    padding-right: 0;
}

.event-board-page .events-board table tbody tr.custom-event-row:not(.custom-event-no-details) .custom-event-expander {
    position: relative;
    inset: auto;
    margin: -10px 0 -10px var(--lwc-space-1, 4px);
    vertical-align: middle;
}

.event-board-page .events-board .custom-event-expander::after {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid var(--events-border);
    border-radius: 50%;
    transition: border-color var(--lwc-duration-fast, 140ms) var(--lwc-ease, ease);
}

/* Touch can retain :hover after a tap. Keep the chevron's ring as its
   surface, and reserve the outer outline for keyboard navigation. */
.event-board-page .events-board .custom-event-expander {
    background: transparent !important;
    box-shadow: none !important;
}

.event-board-page .events-board .custom-event-expander:focus-visible {
    outline: 2px solid var(--secondary-color, #087685) !important;
    outline-offset: 2px;
}

.event-board-page .events-board .custom-event-expander:hover::after,
.event-board-page .events-board tr.custom-event-row.is-open .custom-event-expander::after {
    border-color: var(--secondary-color, #087685);
}

.event-board-page .events-board tbody tr.custom-event-details,
.event-board-page .events-board tbody tr.custom-event-row.is-open + tr.custom-event-details {
    display: block;
}

.event-board-page .events-board tbody tr.custom-event-details > td.details-cell {
    display: block;
    /* Closed, the row has no height; opened, the content brings its own spacing. */
    padding: 0 var(--feed-pad-x) 0 var(--event-message-start);
    border: 0;
    background: transparent;
}

.event-board-page .events-board tbody tr.custom-event-row.is-open + tr.custom-event-details .custom-event-content {
    padding: 0 0 var(--lwc-space-4, 16px);
}

.event-board-page .events-board .custom-event-body {
    box-sizing: border-box;
    border-radius: var(--lwc-radius-md, 8px);
    background: var(--details-bg);
    box-shadow: inset 3px 0 0 var(--custom-event-accent);
}

.event-board-page .events-board tbody tr.custom-event-row.is-open + tr.custom-event-details .custom-event-body {
    padding: var(--lwc-space-4, 16px) var(--lwc-space-4, 16px) var(--lwc-space-4, 16px) var(--lwc-space-5, 20px);
}

.event-board-page .events-board .custom-event-artwork img {
    border-radius: var(--lwc-radius-md, 8px);
}

/* Loading: the skeleton has the anatomy of a real day. */
.event-board-page .events-board .events-skeleton-avatar {
    width: var(--event-avatar-size);
    height: var(--event-avatar-size);
    background-color: var(--card-bg);
    box-shadow: 0 0 0 4px var(--card-bg) !important;
}

.event-board-page .events-board tr.events-skeleton-row > td.col-date::before {
    content: "";
    display: block;
    width: 3rem;
    height: .6rem;
    border-radius: var(--lwc-radius-pill, 999px);
    background: var(--events-border);
    opacity: .7;
}

.event-board-page .events-board tr.events-skeleton-row:not(:first-child) > td.col-date::before {
    opacity: .35;
}

.event-board-page .events-board tr.events-skeleton-row .event-message-cell {
    display: flex;
    flex-direction: column;
    gap: var(--lwc-space-2, 8px);
    padding-block: var(--lwc-space-3, 12px);
}

.event-board-page .events-board tr.events-skeleton-row .event-message-cell::after {
    content: "";
    display: block;
    width: 38%;
    height: 10px;
    border-radius: var(--lwc-radius-pill, 999px);
    background: var(--events-border);
    opacity: .55;
}

.event-board-page .events-board tr.events-skeleton-row .events-skeleton-line {
    flex: 0 0 auto;
    width: 72%;
    height: 12px;
}

.event-board-page .events-board tr.events-skeleton-row:nth-child(2n) .events-skeleton-line { width: 56%; }
.event-board-page .events-board tr.events-skeleton-row:nth-child(3n) .events-skeleton-line { width: 84%; }
.event-board-page .events-board tr.events-skeleton-row:nth-child(2n) .event-message-cell::after { width: 24%; }

.event-board-page .events-board tbody tr.events-skeleton-row:hover {
    background-color: transparent !important;
}

/* Empty and failed feeds keep the card's shape and speak from its middle. */
.event-board-page .events-board tbody tr.events-empty-row,
.event-board-page .events-board tbody tr.events-empty-row > td {
    display: block;
}

.event-board-page .events-board tbody tr.events-empty-row > td,
.event-board-page .events-board tbody tr:has(.events-recovery) > td {
    display: block;
    padding: var(--lwc-space-7, 48px) var(--feed-pad-x);
    color: var(--events-muted);
    font-size: var(--lwc-type-body, 1rem);
    text-align: center;
}

.event-board-page .events-board tbody tr:has(.events-recovery),
.event-board-page .events-board tbody tr.events-empty-row {
    display: block;
    background: transparent !important;
}

.event-board-page .events-board tbody tr.events-empty-row > td::before {
    content: "\f135";
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--lwc-space-4, 16px);
    border: 1px solid var(--events-border);
    border-radius: 50%;
    background: var(--events-header-bg);
    color: var(--events-header-action);
    font-family: "Font Awesome 6 Free";
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
}

/* A failed load keeps the site's notice, set as one line in the card. */
.event-board-page .events-board .events-recovery {
    justify-content: space-between;
    gap: var(--lwc-space-3, 12px) var(--lwc-space-4, 16px);
    min-height: 0;
    max-width: 32rem;
    margin: 0 auto;
    padding: var(--lwc-space-3, 12px) var(--lwc-space-3, 12px) var(--lwc-space-3, 12px) var(--lwc-space-4, 16px);
    text-align: left;
}

.event-board-page .events-board .events-recovery p {
    color: var(--events-text);
    font-weight: 700;
}

.event-board-page .events-board .events-retry-button {
    min-width: min(8rem, 100%);
    max-width: 100%;
    border-color: var(--lwc-border, #b7c7cd);
    border-radius: var(--lwc-radius-md, 8px);
    color: var(--secondary-color, #087685);
}

.event-board-page .events-board .events-retry-button:hover {
    border-color: var(--secondary-color, #087685);
}

/* Back closes the column at the card's own edge. */
.event-board-page .options-container {
    align-items: flex-start;
    width: var(--feed-width);
    margin: var(--lwc-space-5, 24px) auto 0;
}

.event-board-page .options-container .back-button {
    width: auto;
    min-width: 9rem;
    margin: 0;
}

/* Days are groups: a hairline and a breath open each new day, and the
   events of one day sit close under its date. */
.event-board-page .events-board table tbody tr.main-row.day-start:not(.month-start),
.event-board-page .events-board table tbody tr.events-skeleton-row:is(:nth-child(3), :nth-child(5)) {
    --timeline-row-top: var(--lwc-space-3, 12px);
    --event-day-rule: var(--event-rail);
}

.event-board-page .events-board tbody tr.main-row.day-start:has(+ tr.main-row.day-repeat),
.event-board-page .events-board tbody tr.main-row.day-repeat:has(+ tr.main-row.day-repeat) {
    padding-bottom: 0;
}

/* Announcements are the news: each one is a card on the timeline, and
   its opened story continues the same card. */
.event-board-page .events-board table tbody tr.main-row.custom-event-row {
    --timeline-row-top: var(--lwc-space-2, 8px);
    padding-bottom: var(--lwc-space-2, 8px);
}

.event-board-page .events-board table tbody tr.main-row.day-start.custom-event-row:not(.month-start) {
    --timeline-row-top: var(--lwc-space-4, 16px);
}

.event-board-page .events-board table tbody tr.main-row.custom-event-row:not(.custom-event-no-details) {
    cursor: pointer;
}

/* The card fills its row, so the portrait's target never leaves a gap
   between the title and its opened story. */
.event-board-page .events-board table tbody tr.main-row.custom-event-row > td.event-message {
    align-self: stretch;
}

.event-board-page .events-board table tbody tr.main-row.custom-event-row > td.event-message .event-message-cell {
    height: 100%;
    display: flex;
    align-items: center;
    min-height: 44px;
    box-sizing: border-box;
    padding: var(--lwc-space-2, 8px) var(--lwc-space-2, 8px) var(--lwc-space-2, 8px) var(--lwc-space-5, 20px);
    border-radius: var(--lwc-radius-md, 8px);
    background: var(--details-bg);
    box-shadow: inset 3px 0 0 var(--custom-event-accent);
    transition: box-shadow var(--lwc-duration-fast, 140ms) var(--lwc-ease, ease);
}

.event-board-page .events-board table tbody tr.main-row.custom-event-row.custom-event-no-details > td.event-message .event-message-cell {
    padding-right: var(--lwc-space-4, 16px);
}

/* The card is the surface: the row behind it neither tints nor lifts. */
.event-board-page .events-board table tbody tr.custom-event-row,
.event-board-page .events-board table tbody tr.custom-event-row:is(:hover, :focus-within, .group-hover),
.event-board-page .events-board table tbody tr.custom-event-row:has(+ tr.custom-event-details:hover),
.event-board-page .events-board table tbody tr.custom-event-row + tr.custom-event-details,
.event-board-page .events-board table tbody tr.custom-event-row + tr.custom-event-details:hover,
.event-board-page .events-board table tbody tr.custom-event-row:hover + tr.custom-event-details {
    background-color: transparent;
    box-shadow: none;
    transform: none;
}

.event-board-page .events-board .custom-event-row .custom-event-title {
    flex: 1 1 auto;
    font-size: 1.0625rem;
    line-height: 1.4;
}

.event-board-page .events-board table tbody tr.main-row.custom-event-row.is-open {
    padding-bottom: 0;
}

.event-board-page .events-board table tbody tr.main-row.custom-event-row.is-open > td.event-message .event-message-cell {
    border-radius: var(--lwc-radius-md, 8px) var(--lwc-radius-md, 8px) 0 0;
}

.event-board-page .events-board tbody tr.custom-event-row.is-open + tr.custom-event-details .custom-event-content {
    padding: 0 0 var(--lwc-space-3, 12px);
}

.event-board-page .events-board tbody tr.custom-event-row.is-open + tr.custom-event-details .custom-event-body {
    padding-top: var(--lwc-space-1, 4px);
    border-radius: 0 0 var(--lwc-radius-md, 8px) var(--lwc-radius-md, 8px);
}

.event-board-page .events-board tbody tr.custom-event-row.is-open + tr.custom-event-details .custom-event-body > :first-child {
    margin-top: 0;
}

/* The loading card has the same anatomy: day groups and an announcement. */
.event-board-page .events-board tr.events-skeleton-row:nth-child(3) .event-message-cell {
    border-radius: var(--lwc-radius-md, 8px);
    background: var(--details-bg);
    box-shadow: inset 3px 0 0 var(--custom-event-accent);
    padding-inline: var(--lwc-space-5, 20px) var(--lwc-space-4, 16px);
}

.event-board-page .events-board tr.events-skeleton-row:is(:nth-child(2), :nth-child(4)) > td.col-date::before {
    visibility: hidden;
}

/* Tablets: the date column narrows, everything else keeps its place. */
@media (max-width: 820px) {
    main.event-board-page {
        --feed-pad-x: var(--lwc-space-4, 16px);
    }

    .event-board-page .events-board {
        --event-date-column: 4rem;
    }
}

/* Phones: portrait and rail lead, the date sits under its message. */
@media (max-width: 600px) {
    main.event-board-page {
        --feed-width: 100%;
        --feed-pad-x: var(--lwc-space-3, 12px);
        --feed-clearance: var(--lwc-space-4, 16px);
        /* Enlarged text: the side space stops growing with the text so
           the message keeps its width. */
        padding-inline: min(1rem, 4vw);
    }

    .event-board-heading {
        padding-inline: var(--lwc-space-4, 16px);
    }

    .event-board-heading h1 { font-size: clamp(1.5rem, 7vw, 2rem); }

    .event-board-page .events-board {
        --event-date-column: 0px;
        --event-avatar-inset: var(--lwc-space-1, 4px);
        --event-avatar-gap: var(--lwc-space-2, 8px);
    }

    .event-board-page .events-board tbody tr.main-row,
    .event-board-page .events-board tbody tr.events-skeleton-row {
        --timeline-row-top: var(--lwc-space-2, 8px);
        --event-rail-top: calc(var(--timeline-row-top) + var(--event-avatar-target) / 2);
        grid-template-columns: var(--event-avatar-column) minmax(0, 1fr);
        grid-template-areas:
            "avatar message"
            "avatar date";
        align-items: start;
        padding: var(--timeline-row-top) min(var(--lwc-space-4, 16px), 4vw) var(--lwc-space-2, 8px) 0;
    }

    .event-board-page .events-board tbody tr.main-row > td.col-avatar,
    .event-board-page .events-board tbody tr.events-skeleton-row > td.col-avatar {
        align-self: start;
        padding-top: 0;
    }

    .event-board-page .events-board .athlete-td {
        align-items: center;
        min-height: var(--event-avatar-target);
    }

    .event-board-page .events-board .avatar-link,
    .event-board-page .events-board .avatar-disabled {
        align-items: center;
        min-height: 44px;
        padding-top: 0;
    }

    .event-board-page .events-board tbody tr.main-row > td.event-message .event-message-cell {
        padding-block: 0;
    }

    .event-board-page .events-board tbody tr.main-row > td.event-message,
    .event-board-page .events-board tbody tr.events-skeleton-row > td.event-message {
        align-self: center;
    }

    .event-board-page .events-board tbody tr > td.col-date,
    .event-board-page .events-board:not(.athlete-scroll) tbody tr > td.col-date {
        display: block;
        width: auto;
        padding: 2px 0 0;
        font-size: var(--lwc-type-xs, .75rem);
        line-height: 1.3;
    }

    .event-board-page .events-board tbody tr > td.col-date:empty {
        display: none;
    }

    .event-board-page .events-board tr.events-skeleton-row > td.col-date::before {
        margin-top: var(--lwc-space-1, 4px);
    }

    /* The rail meets each portrait's centre, which now sits near the row's top. */
    .event-board-page .events-board table tbody tr.events-skeleton-row:first-child,
    .event-board-page .events-board table tbody tr.main-row.month-start {
        --event-rail-y: var(--event-rail-top);
        --event-rail-h: 100%;
    }

    .event-board-page .events-board table tbody tr.events-skeleton-row:last-child,
    .event-board-page .events-board table tbody tr.main-row.month-end {
        --event-rail-y: 0px;
        --event-rail-h: var(--event-rail-top);
    }

    .event-board-page .events-board tbody tr.events-month-row + tr.main-row {
        --timeline-row-top: var(--lwc-space-3, 12px);
    }

    .event-board-page .options-container .back-button {
        width: 100%;
        max-width: none;
    }

    .event-board-page .events-board tbody tr.custom-event-details > td.details-cell {
        padding-right: min(var(--lwc-space-4, 16px), 4vw);
    }

    .event-board-page .events-board tbody tr.custom-event-row.is-open + tr.custom-event-details .custom-event-content {
        padding-top: var(--lwc-space-2, 8px);
    }

    .event-board-page .events-board tbody tr.custom-event-row.is-open + tr.custom-event-details .custom-event-body {
        padding: var(--lwc-space-3, 12px) var(--lwc-space-3, 12px) var(--lwc-space-3, 12px) var(--lwc-space-4, 16px);
    }

    /* The day leads its group as a label over its first event; the
       events after it in that day carry no date of their own. */
    .event-board-page .events-board tbody tr.main-row,
    .event-board-page .events-board tbody tr.events-skeleton-row {
        --event-date-label: 0px;
        --event-rail-top: calc(var(--timeline-row-top) + var(--event-date-label) + var(--event-avatar-target) / 2);
        position: relative;
        grid-template-areas:
            ". date"
            "avatar message";
    }

    .event-board-page .events-board tbody tr.main-row.day-start,
    .event-board-page .events-board tbody tr.events-skeleton-row:is(:first-child, :nth-child(3), :nth-child(5)) {
        --event-date-label: calc(1rem + var(--lwc-space-2, 8px));
    }

    .event-board-page .events-board tbody tr.main-row > td.col-date,
    .event-board-page .events-board:not(.athlete-scroll) tbody tr.main-row > td.col-date {
        box-sizing: border-box;
        height: var(--event-date-label);
        padding: 0 0 var(--lwc-space-2, 8px);
        color: var(--events-text);
        font-size: var(--lwc-type-xs, .75rem);
        font-weight: 700;
        line-height: 1rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .event-board-page .events-board tbody tr.main-row.day-repeat > td.col-date {
        color: var(--events-muted);
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .event-board-page .events-board tbody tr.events-skeleton-row > td.col-date {
        display: none;
    }

    .event-board-page .events-board tbody tr.events-skeleton-row:is(:first-child, :nth-child(3), :nth-child(5)) > td.col-date {
        display: block;
        height: var(--event-date-label);
        padding: 0;
    }

    .event-board-page .events-board tbody tr.events-skeleton-row:is(:first-child, :nth-child(3), :nth-child(5)) > td.col-date::before {
        margin: .2rem 0 0;
        visibility: visible;
    }

    .event-board-page .events-board table tbody tr.main-row.custom-event-row > td.event-message .event-message-cell {
        padding: var(--lwc-space-2, 8px) var(--lwc-space-1, 4px) var(--lwc-space-2, 8px) var(--lwc-space-4, 16px);
    }

    .event-board-page .events-board .custom-event-row .custom-event-title {
        font-size: var(--lwc-type-body, 1rem);
    }

    .event-board-page .events-board tbody tr.custom-event-row.is-open + tr.custom-event-details .custom-event-content {
        padding-top: 0;
    }

    .event-board-page .events-board tbody tr.custom-event-row.is-open + tr.custom-event-details .custom-event-body {
        padding-top: var(--lwc-space-2, 8px);
    }
}

/* ---- Living timeline: months arrive, pin and hand over -----------------
   Each month's band reveals as the reader reaches it. While pinned under the
   site bar it carries an accent rule and a soft shadow; as the next month
   pushes it out it fades back, so the hand-off reads as one motion. */
.event-board-page .events-board tbody tr.events-month-row > th {
    position: relative;
    transition: box-shadow var(--feed-move, 260ms) var(--feed-ease, ease);
}

.event-board-page .events-board tbody tr.events-month-row > th::after {
    content: "";
    position: absolute;
    left: var(--feed-pad-x);
    bottom: -1px;
    width: 4.5rem;
    height: 2px;
    border-radius: 2px;
    background: var(--events-header-action);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 360ms var(--feed-ease, ease);
}

.event-board-page .events-board tbody tr.events-month-row.is-revealed > th::after {
    transform: scaleX(.4);
}

.event-board-page .events-board tbody tr.events-month-row.is-pinned > th {
    box-shadow: 0 10px 18px -16px rgba(15, 23, 42, .55);
}

.event-board-page .events-board tbody tr.events-month-row.is-pinned > th::after {
    transform: scaleX(1);
}

.event-board-page .events-month-label {
    display: inline-block;
    opacity: calc(1 - var(--handoff, 0) * .8);
    transform: translateY(calc(var(--handoff, 0) * -4px));
}

.event-board-page .events-board tbody tr.events-month-row:not(.is-revealed) .events-month-label {
    opacity: 0;
    transform: translateX(-14px);
}

.event-board-page .events-board tbody tr.events-month-row.is-revealed .events-month-label {
    animation: lwc-month-in 420ms var(--feed-ease, ease) backwards;
}

.event-board-page .events-board tbody tr.events-month-row.is-settled .events-month-label {
    animation: none;
}

@keyframes lwc-month-in {
    from { opacity: 0; transform: translateX(-14px); letter-spacing: .2em; }
}

/* The rows of a month that is still on its way wait just below their place. */
.event-board-page .events-board tbody:has(> tr.events-month-row:not(.is-revealed)) > tr.main-row.row-appear:not(.is-visible) {
    transform: translateY(14px);
}

/* More of the timeline: skeletons wait at the end and settle into rows. */
.event-board-page .events-board tbody.events-more {
    display: block;
    padding-bottom: var(--lwc-space-3, 12px);
    border-top: 1px solid var(--events-border);
}

.event-board-page .events-board tbody.events-more > tr.events-skeleton-row {
    opacity: .55;
    transition: opacity var(--feed-move, 260ms) var(--feed-ease, ease);
}

.event-board-page .events-board tbody.events-more.is-loading > tr.events-skeleton-row {
    opacity: 1;
}

.event-board-page .events-board tbody.events-more > tr.events-skeleton-row:nth-child(2) { transition-delay: 40ms; }
.event-board-page .events-board tbody.events-more > tr.events-skeleton-row:nth-child(3) { transition-delay: 80ms; }

.event-board-page .events-board tbody:nth-last-of-type(2):has(+ tbody.events-more) {
    padding-bottom: 0;
}

@media (prefers-color-scheme: dark) {
    .event-board-page .events-board tbody tr.events-month-row.is-pinned > th {
        box-shadow: 0 10px 18px -14px rgba(0, 0, 0, .8);
    }
}

@media (prefers-reduced-motion: reduce) {
    .event-board-page .events-board tbody tr.events-month-row > th,
    .event-board-page .events-board tbody tr.events-month-row > th::after,
    .event-board-page .events-board tbody.events-more > tr.events-skeleton-row {
        transition: none;
    }

    .event-board-page .events-month-label {
        opacity: 1;
        transform: none;
        animation: none !important;
    }
}