:root {
    --bg: #fff;
    --surface: #fff;
    --text: #202423;
    --muted: #68716e;
    --line: #e1e6e4;
    --primary: #08755b;
    --primary-hover: #065640;
    --sidebar-width: 208px;
    --page-title-size: 34px;
    --section-title-size: 22px;
}

body { display: flex; flex-direction: column; min-height: 100svh; margin: 0; padding-bottom: 44px; background: var(--bg); font-size: 14px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
input, select, textarea { max-width: 100%; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { font-size: var(--page-title-size); font-style: italic; font-weight: 800; line-height: 1.2; margin: 0 0 10px; padding-inline-end: 0.12em; color: var(--text); }
h2 { font-size: var(--section-title-size); font-style: normal; line-height: 1.3; margin: 0 0 16px; }
h3 { font-size: 17px; line-height: 1.4; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.link-underline { display: inline-flex; align-items: center; gap: inherit; max-width: 100%; padding-bottom: 2px; border-bottom: 1px solid currentColor; }
.dashboard-races-all-link .link-underline, .race-rules-link .link-underline { border-bottom-color: transparent; }
.dashboard-races-all-link:hover .link-underline, .dashboard-races-all-link:focus-visible .link-underline,
.race-rules-link:hover .link-underline, .race-rules-link:focus-visible .link-underline { border-bottom-color: currentColor; }
.race-rules-link:hover { text-decoration: none; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 2000; padding: 12px 18px; background: white; color: var(--primary); }
.skip-link:focus { top: 10px; }
.page { flex: 1 0 auto; width: min(1240px, calc(100% - 64px)); margin: 32px auto 64px; min-width: 0; }
.page:focus { outline: none; }
.panel { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; min-width: 0; }
.panel + .panel { margin-top: 36px; }
.section-title { margin-top: 32px; font-size: var(--section-title-size); }
.section-heading { margin-bottom: 18px; }
.dashboard-heading { align-items: center; gap: 16px; margin-bottom: 32px; }
.dashboard-heading p { margin: 6px 0 0; font-size: 13px; }
.site-footer { position: fixed; inset: auto 0 0; z-index: 125; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 44px; min-height: 44px; margin: 0; padding: 10px 32px; background: white; color: var(--muted); font-size: 12px; }
.privacy-page { max-width: 880px; margin: 0 auto; line-height: 1.75; }
.privacy-page > header { margin-bottom: 28px; }
.privacy-page > section { padding: 26px 0; border-top: 1px solid var(--line); }
.privacy-page h2 { font-size: 20px; margin-bottom: 16px; }
.privacy-page p { margin: 0 0 14px; }
.privacy-page ul { padding-left: 22px; }
.privacy-page li { margin-bottom: 10px; }
.privacy-page address { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-style: normal; }
.privacy-page a { overflow-wrap: anywhere; }
.export-guide { max-width: 960px; margin: 0 auto; }
.export-guide-heading { margin-bottom: 24px; padding-right: 52px; }
.export-guide-heading p { max-width: 720px; margin: 12px 0 0; font-size: 16px; }
.export-guide-formats { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; border-left: 3px solid var(--primary); background: #f3f7f5; }
.export-guide-formats > i { font-size: 24px; color: var(--primary); margin-top: 3px; }
.export-guide-formats strong { font-size: 16px; }
.export-guide-formats strong span { display: inline-block; margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--muted); }
.export-guide-formats p { margin: 6px 0 0; }
.export-guide-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; padding: 18px 0; }
.export-guide-nav a { padding: 8px 0; font-weight: 650; }
.export-guide-provider { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; border-top: 1px solid var(--line); padding: 30px 0; scroll-margin-top: 24px; }
.export-guide-provider h2 { font-size: 22px; margin-bottom: 8px; }
.export-guide-platform { display: flex; align-items: center; gap: 8px; color: var(--muted); margin: 0 0 14px; font-size: 13px; }
.export-guide-provider a i, .export-guide-modal-link i { font-size: 11px; }
.export-guide-provider .primary-link-button { gap: 8px; max-width: 100%; white-space: normal; }
.export-guide-steps { margin: 0 0 20px; padding-left: 24px; }
.export-guide-steps li { padding-left: 5px; margin-bottom: 12px; line-height: 1.7; }
.export-guide-steps li::marker { color: var(--primary); font-weight: 700; }
.export-guide-note { padding: 12px 16px; margin: 16px 0; background: #f7f8f9; border-left: 2px solid #aab4be; line-height: 1.65; }
.export-guide-sources { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 13px; }
.export-guide-troubleshooting { border-top: 1px solid var(--line); padding-top: 28px; }
.export-guide-troubleshooting details { padding: 14px 0; border-bottom: 1px solid var(--line); }
.export-guide-troubleshooting summary { cursor: pointer; font-weight: 650; }
.export-guide-troubleshooting details p { margin: 12px 0 0; line-height: 1.7; }
.export-guide-version { margin-top: 24px; font-size: 12px; }
.export-guide-link { font-size: 14px; }
.export-guide-modal-link { margin: 0 0 18px; font-size: 13px; }
.import-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 148px; padding: 20px; border: 2px dashed #a8bcb4; border-radius: 6px; background: #f7faf8; text-align: center; cursor: pointer; }
.import-dropzone > .fa-cloud-arrow-up { font-size: 28px; color: var(--primary); }
.import-dropzone-title { font-weight: 650; }
.import-dropzone-hint { font-size: 12px; color: var(--muted); }
.import-dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.import-dropzone:hover, .import-dropzone.is-dragging { border-color: var(--primary); background: #eaf5ef; }
.import-dropzone:focus-within { outline: 2px solid var(--primary); outline-offset: 3px; }
.import-dropzone:has(input[aria-invalid="true"]) { border-color: #b43d3d; }
.import-selected-files { display: grid; gap: 6px; margin-top: 10px; min-width: 0; }
.import-selection-summary { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.import-selected-file { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; box-sizing: border-box; padding: 6px 8px 6px 12px; min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: #f5f7f6; }
.import-selected-files[hidden], .import-file-error[hidden], .import-selection-summary[hidden] { display: none; }
.import-selected-file > span { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.import-selected-file > i { color: var(--muted); }
.import-selected-file > button { flex: 0 0 36px; width: 36px; height: 36px; border: 0; background: transparent; color: var(--muted); }
.import-selected-file > button:hover { background: #fbecec; color: #a33131; }
.import-file-error { margin: 10px 0 0; color: #a33131; font-size: 13px; }
.import-workout-type { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 12px; margin: 20px 0; }
.import-workout-type > span { color: var(--muted); font-weight: 600; }
.import-workout-type .choices { margin-bottom: 0; min-width: 0; }
.modal-panel.is-importing .import-file-field { pointer-events: none; opacity: 0.65; }
@media (max-width: 640px) {
    .export-guide-heading { padding-right: 40px; }
    .export-guide-heading h1 { font-size: 28px; }
    .export-guide-heading p { font-size: 14px; }
    .export-guide-provider { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px 0; }
    .export-guide-platform { margin-bottom: 8px; }
    .export-guide-formats { padding: 14px; gap: 12px; }
    .export-guide-formats strong span { display: block; margin-left: 0; }
    .export-guide-nav { gap: 0 18px; }
}
.privacy-form-note { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.is-authenticated .site-footer { left: var(--sidebar-width); }
.topbar { flex-shrink: 0; }
.is-authenticated { padding-left: var(--sidebar-width); }
.is-authenticated .page { margin-top: 32px; }
.is-authenticated .page:has(.activity-detail-nav) { margin-top: 96px; }
.is-authenticated .page > .dashboard-heading:first-child:not(.page-title-toolbar),
.is-authenticated .page > .panel:first-child > .dashboard-heading:first-child:not(.page-title-toolbar),
.is-authenticated .races-page-heading:not(.page-title-toolbar),
.is-authenticated .messages-page-heading,
.is-authenticated .contact-page > h1 { padding-right: 76px; }
.is-authenticated .topbar {
    position: fixed; inset: 0 auto 0 0; z-index: 100; display: flex;
    flex-direction: column; align-items: stretch; width: var(--sidebar-width); height: 100dvh;
    padding: 28px 0 16px; gap: 20px; border: 0; background: #1c1f1e; color: #ecf0ee;
}
.brand { flex: 0 0 auto; }
.brand img { width: 132px; height: 66px; object-fit: contain; display: block; }
.is-authenticated .brand { align-self: flex-start; margin: 0 24px 10px; }
.is-authenticated .brand img { filter: brightness(0) invert(1); }
.is-authenticated .top-nav { display: flex; flex: 1; flex-direction: column; align-items: stretch; gap: 6px; min-height: 0; overflow-y: auto; padding: 0 8px 0 0; }
.is-authenticated .top-nav .nav-item {
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px;
    flex-shrink: 0; min-height: 46px; padding: 10px 18px 10px 24px;
    border: 0; border-left: 4px solid transparent; border-radius: 0 5px 5px 0;
    color: #dce1df; font-size: 14px; font-weight: 500; text-decoration: none;
}
.is-authenticated .top-nav .nav-item i { flex: 0 0 22px; width: 22px; text-align: center; font-size: 19px; color: #c4ccc8; }
.is-authenticated .top-nav .nav-item:hover { background: #292e2c; color: white; }
.is-authenticated .top-nav .nav-item.is-active { background: #163e32; border-left-color: #22b084; color: white; }
.is-authenticated .top-nav .nav-item.is-active i { color: #bce7d8; }
.nav-spacer { flex: 1 0 24px; }
.sidebar-account { display: flex; align-items: center; gap: 6px; margin: 8px 6px 0 28px; padding-top: 16px; border-top: 1px solid #3a403d; }
.sidebar-profile { display: flex; align-items: center; gap: 14px; min-width: 0; min-height: 40px; color: #dce1df; font-size: 14px; font-weight: 500; flex: 1; }
.sidebar-profile i { flex: 0 0 22px; width: 22px; text-align: center; font-size: 20px; }
.sidebar-profile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-account .inline-post-form { margin: 0; flex: 0 0 auto; }
.sidebar-account .logout-link-button { display: grid; place-items: center; width: 36px; height: 40px; padding: 0; background: transparent; color: #b5c0ba; border: 0; cursor: pointer; }
.sidebar-account .logout-link-button:hover { color: white; background: transparent; }
.is-authenticated .top-nav :focus-visible { outline-color: #75d6b7; outline-offset: -3px; }
.app-utilities { position: fixed; z-index: 110; top: 26px; right: 32px; display: flex; align-items: center; gap: 18px; height: 42px; }
.app-utilities .account-summary { position: relative; order: initial; margin: 0; padding: 0; border: 0; }
.app-utilities .message-notification-trigger { width: 40px; height: 40px; min-height: 40px; border: 0; border-radius: 6px; background: white; color: var(--text); font-size: 21px; transition: background-color 140ms ease, color 140ms ease; }
.app-utilities .message-notification-trigger:hover,
.app-utilities .message-notification-trigger:focus-visible { background: #eaf2ee; color: var(--primary); }
.app-utilities .message-notification-trigger.has-unread { border: 1px solid #efb3aa; background: #fff0ed; color: #b73829; }
.app-utilities .message-notification-trigger.has-unread:hover,
.app-utilities .message-notification-trigger.has-unread:focus-visible,
.app-utilities .message-notification-trigger.has-unread[aria-expanded="true"] { border-color: #d9897c; background: #ffe0d9; color: #91271c; }
.app-utilities .message-notification-trigger.is-empty { background: #fff; }
.message-notification-count { min-width: 20px; height: 20px; padding: 0 4px; top: -5px; right: -6px; background: #b73829; border: 2px solid white; border-radius: 10px; font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; }
.app-utilities .message-popover { top: 48px; right: 0; width: min(380px, calc(100vw - 32px)); }
.message-popover { border-radius: 6px; box-shadow: 0 12px 32px #2024231a; }
.bottom-nav { display: none; }
.flash-stack { top: 80px; }
.is-authenticated .cookie-notice { left: calc(var(--sidebar-width) + 24px); }

.is-guest .topbar { min-height: 80px; height: auto; border-bottom: 1px solid var(--line); padding: 16px 32px; gap: 24px; }
.is-guest .topbar nav { gap: 24px; }
.is-guest .topbar nav a { font-size: 14px; }
.is-guest .topbar nav .guest-register { padding: 10px 18px; border-radius: 5px; background: var(--primary); color: white; }

/* The race cards are the only framed elements in the overview. */
.overview-heading { margin-bottom: 34px; }
.overview-heading .dashboard-actions { flex-direction: row; flex-wrap: wrap; width: auto; }
button.import-link[data-modal-open] { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 16px; background: var(--primary); border: 1px solid var(--primary); border-radius: 5px; color: #fff; font-size: 16px; font-weight: 650; text-decoration: none; }
button.import-link[data-modal-open] > i { font-size: 18px; }
button.import-link[data-modal-open]:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; text-decoration: none; }
.strava-connect-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 14px; border: 1px solid #bc3507; border-radius: 5px; background: #d33d08; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.4; text-decoration: none; white-space: nowrap; box-shadow: 0 2px 5px #a32c0820; }
.strava-connect-button:hover { background: #b93405; color: #fff; }
.strava-connect-button:focus-visible { outline-color: #b93405; }
.strava-connect-button i { font-size: 19px; }
.activities-import-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 16px; }
.activities-import-actions .strava-connect-button,
.activities-import-actions button.import-link[data-modal-open] { box-sizing: border-box; height: 44px; min-height: 44px; padding-top: 9px; padding-bottom: 9px; font-size: 16px; line-height: 24px; }
#settings-strava { scroll-margin-top: 64px; }
#settings-strava:focus { outline: none; }
.message-email-form { display: grid; gap: 16px; justify-items: start; position: relative; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); min-width: 0; }
.settings-save-subsection .message-email-form input[type=submit] { position: static; margin: 0; }
.message-email-switch { display: inline-flex; align-items: center; gap: 12px; position: relative; cursor: pointer; font-weight: 650; }
.message-email-switch > input { position: absolute; opacity: 0; width: 42px; height: 24px; margin: 0; cursor: pointer; }
.message-email-switch-track { display: block; width: 42px; height: 24px; flex: 0 0 42px; border-radius: 12px; background: #8b9792; transition: background .15s ease; pointer-events: none; }
.message-email-switch-track::after { content: ''; display: block; width: 18px; height: 18px; margin: 3px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
.message-email-switch > input:checked + .message-email-switch-track { background: #08765e; }
.message-email-switch > input:checked + .message-email-switch-track::after { transform: translateX(18px); }
.message-email-switch > input:focus-visible + .message-email-switch-track { outline: 2px solid #08765e; outline-offset: 3px; }
.message-email-options { width: 100%; min-width: 0; }
.message-email-options-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.message-email-options-heading label { font-size: 13px; font-weight: 650; color: var(--muted); margin: 0; }
.message-email-options-heading .message-email-all { padding: 0; border: 0; background: none; color: var(--primary); text-decoration: underline; font-size: 13px; cursor: pointer; }
.message-email-options .choices { width: 100%; min-width: 0; margin: 0; }
.message-email-options .choices__inner { box-sizing: border-box; width: 100%; }
.message-email-options .choices__list--multiple .choices__item { background: #e9f3ee; border-color: #d3e5da; color: #245b45; white-space: normal; }
.message-email-options .choices__list--multiple .choices__button { filter: brightness(0); opacity: .6; border-color: #91b5a2; }
[data-message-email-last] .message-email-options .choices__button { display: none; }
.strava-capacity-notice { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border: 1px solid #e8d4a0; border-left: 4px solid #c38e24; border-radius: 6px; background: #fff8e8; color: #493d24; }
.strava-capacity-notice > i { flex: 0 0 20px; margin-top: 3px; color: #a36c11; font-size: 20px; text-align: center; }
.strava-capacity-notice > div { min-width: 0; }
.strava-capacity-notice strong { display: block; font-size: 15px; line-height: 1.5; }
.strava-capacity-notice p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; }
.dashboard-races-panel { display: block; overflow: visible; }
.dashboard-races-panel::before { display: none; }
.dashboard-races-heading { flex-direction: row; align-items: center; padding: 0; gap: 12px; margin-bottom: 18px; min-height: 32px; }
.dashboard-races-heading h2 { margin: 0; font-size: var(--section-title-size); }
.dashboard-races-all-link { border-bottom: 0; padding: 0; gap: 8px; font-size: 13px; font-weight: 650; align-self: auto; }
.dashboard-races-all-link:hover { text-decoration: none; }
.dashboard-races-all-link i, .dashboard-race-detail-link i { font-size: 11px; }
.dashboard-races-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.dashboard-races-grid > section > h2 { color: var(--muted); font-size: 12px; font-weight: 650; margin: 0 0 10px; }
.dashboard-active-race-list, .dashboard-open-race-list { gap: 16px; padding-top: 0; }
.dashboard-active-race, .dashboard-open-race, .dashboard-open-race.has-countdown {
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; min-height: 228px; padding: 20px 22px; border: 1px solid var(--line);
    border-left: 6px solid var(--primary); border-radius: 6px; background: white; box-shadow: none;
}
.dashboard-active-race > div:first-child { flex: 0 0 auto; }
.dashboard-race-card-heading { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; min-width: 0; }
.dashboard-race-card-heading h3, .dashboard-open-race .race-item-heading h3 { font-size: 21px; line-height: 1.3; margin: 0; font-weight: 750; min-width: 0; }
.dashboard-race-card-heading h3 a, .dashboard-open-race .race-item-heading h3 a { color: var(--text); text-decoration: none; }
.dashboard-race-card-heading h3 a:hover, .dashboard-open-race .race-item-heading h3 a:hover { color: var(--primary); }
.dashboard-race-card-heading .race-visibility-badge { flex: 0 0 auto; }
.dashboard-active-race > .dashboard-race-card-heading > span { margin-top: 2px; }
.dashboard-race-date { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.dashboard-open-race .race-meta-line { margin-top: 9px; column-gap: 14px; row-gap: 5px; font-size: 13px; }
.dashboard-open-race .race-item-heading { gap: 8px 10px; }
.dashboard-race-description { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-top: 8px; }
.dashboard-race-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 24px 0; gap: 0; }
.dashboard-race-placement, .dashboard-race-metric { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 4px 8px; border-radius: 0; background: transparent; text-align: center; }
.dashboard-race-metric { border-left: 1px solid var(--line); }
.dashboard-race-placement strong, .dashboard-race-metric strong { font-size: 24px; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dashboard-race-placement span, .dashboard-race-metric span { margin: 0; font-size: 11px; line-height: 1.4; white-space: normal; color: var(--muted); }
.dashboard-race-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 18px; }
.race-difficulty { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; max-width: 100%; white-space: nowrap; color: var(--muted); font-size: 12px; font-weight: 500; }
.race-difficulty .race-difficulty-value { display: inline-flex; align-items: center; gap: 6px; }
.race-difficulty strong { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.race-difficulty .race-difficulty-range { display: inline-flex; flex: 0 0 48px; gap: 2px; width: 48px; height: 8px; margin: 0 4px; }
.race-difficulty-range .race-difficulty-step { display: block; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 1px; background: #d9e2dd; }
.race-difficulty-range .race-difficulty-step.is-filled { background: #75b99b; }
.race-difficulty-range .race-difficulty-step.is-filled:nth-child(2) { background: #54a381; }
.race-difficulty-range .race-difficulty-step.is-filled:nth-child(3) { background: #328966; }
.race-difficulty-range .race-difficulty-step.is-filled:nth-child(4) { background: #187051; }
.race-difficulty-range .race-difficulty-step.is-filled:nth-child(5) { background: #0b563d; }
.race-participant-count { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.race-participant-count i { font-size: 16px; }
.dashboard-race-detail-link { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-size: 12px; font-weight: 650; text-decoration: none; }
.dashboard-countdown-line { display: flex; align-items: center; gap: 10px; margin-top: 25px; color: #a7660a; }
.dashboard-countdown-line > i { font-size: 24px; }
.dashboard-race-countdown { position: static; min-height: 0; padding: 0; border: 0; background: transparent; border-radius: 0; color: #a7660a; box-shadow: none; font-size: 18px; white-space: normal; }
.dashboard-open-race-action { width: auto; justify-content: flex-start; flex-wrap: wrap; }
.dashboard-active-race > .dashboard-open-race-action { margin-top: 22px; }
.dashboard-race-join-link { font-size: 13px; }
.dashboard-races-empty, .empty-state { border: 0; border-left: 2px solid var(--line); border-radius: 0; padding: 20px; background: #f8faf9; color: var(--muted); text-align: left; font-size: 14px; }
.dashboard-races-panel + .dashboard-activity-section { margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--line); }
.dashboard-activity-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; margin-bottom: 24px; }
.dashboard-activity-heading h2 { grid-column: 1; margin: 0; }
.dashboard-activity-heading > .dashboard-summary-date { grid-column: 1; }
.dashboard-activity-heading > a { grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap; }
.dashboard-summary-date { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.dashboard-measurements-heading { margin-bottom: 20px; }
.dashboard-measurements-title-row { justify-content: space-between; gap: 12px; }
.dashboard-measurements-title-row h2 { margin: 0; }
.equipment-heading { flex-direction: row; justify-content: space-between; align-items: center; }
.equipment-heading h1, .dashboard-measurements-title-row h1 { margin: 0; }
#measurements { scroll-margin-top: 32px; }
.section-icon-button { border: 1px solid #b9d6cb; background: transparent; color: var(--primary); border-radius: 5px; width: 34px; height: 34px; min-height: 34px; }
.section-icon-button:hover { background: #edf6f1; }

.stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 28px; }
.stat { border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 0 20px; background: transparent; box-shadow: none; min-width: 0; }
.stat-label { color: var(--muted); font-size: 12px; }
.stat strong { font-size: 25px; line-height: 1.35; font-weight: 750; color: var(--text); font-variant-numeric: tabular-nums; }
.table-wrap { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.activity-table { width: 100%; border: 0; border-radius: 0; border-collapse: collapse; font-size: 13px; }
.activity-table th { padding: 12px 14px; border-top: 1px solid var(--line); background: #fafbfa; color: var(--muted); font-size: 12px; font-weight: 550; }
.activity-table td { padding: 13px 14px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.activity-table td:nth-child(2) { font-weight: 550; }
.equipment-table th:nth-child(3), .equipment-table td:nth-child(3) { text-align: center; }
.activity-table tbody tr:hover { background: #f7faf8; }
.activity-table a { color: inherit; }
.activity-table a:hover { color: var(--primary); }
.stats-table-scroll { max-height: 280px; overflow: auto; }
.stats-table-scroll .activity-table { border-collapse: separate; border-spacing: 0; overflow: visible; }
.stats-table-scroll thead { position: sticky; top: 0; z-index: 1; background: #fafbfa; }
.stats-table-scroll:focus-visible { outline-offset: 2px; }
.activity-badge { border-radius: 5px; width: auto; min-width: 76px; min-height: 23px; font-weight: 550; padding: 2px 8px; line-height: 1.35; }
.activity-badge-easy_run { background: #e4f0fb; color: #365f7c; }
.activity-badge-long_run { background: #e7f2e9; color: #356c45; }
.activity-badge-tempo { background: #fff0d9; color: #8c611d; }
.activity-badge-interval { background: #f9e6e4; color: #9a4c42; }
.activity-filters { padding: 18px 0; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; border-radius: 0; margin: 0 0 26px; }
.activity-filters label > span, .year-filter label > span { font-size: 12px; }
.activity-filters[data-auto-filter-bound] .filter-manual-submit { display: none; }
.activity-filters .filter-clear-link { display: inline-block; padding: 10px 0; color: var(--primary); font-size: 12px; line-height: 20px; text-decoration: underline; }
.activity-filter-error { flex: 1 0 100%; margin: 0; color: #a52a30; font-size: 12px; }
.activity-filter-error[hidden] { display: none; }
.range-switch a, .pagination a { border-radius: 4px; }
.race-catalog-heading { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 18px; }
.race-catalog-heading h2 { margin: 0; }
.race-catalog-controls { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; }
.race-catalog-controls .race-filter-tabs { width: auto; min-width: 0; overflow: visible; border: 0; background: transparent; }
.race-period-filter-tabs { grid-template-columns: repeat(3, minmax(64px, auto)); gap: 24px; }
.race-filter-tab { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; padding: 10px 0; font-size: 14px; font-weight: 650; line-height: 1.4; transition: color 140ms ease, background-color 140ms ease; }
.race-filter-tab + .race-filter-tab { border-left: 0; }
.race-filter-tab:hover { background: transparent; color: var(--text); }
.race-filter-tab.is-active { background: transparent; color: var(--primary); }
.race-period-filter-tabs .race-filter-tab { position: relative; }
.race-period-filter-tabs .race-filter-tab::after { content: ''; position: absolute; bottom: 0; left: calc(50% - 12px); width: 24px; height: 3px; border-radius: 2px; background: transparent; }
.race-period-filter-tabs .race-filter-tab.is-active::after { background: var(--primary); }
.race-catalog-controls .race-visibility-filter-tabs { padding: 3px; gap: 2px; border-radius: 6px; background: #f0f3f1; }
.race-visibility-filter-tabs .race-filter-tab { min-height: 34px; padding: 6px 12px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.race-visibility-filter-tabs .race-filter-tab:hover { background: #e5ebe7; }
.race-visibility-filter-tabs .race-filter-tab.is-active { background: white; color: var(--text); box-shadow: 0 1px 3px #2024231f; }
.race-visibility-badge, .race-state-badge { padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.race-quality-type-badge { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 8px; border: 1px solid #f2d27d; border-radius: 4px; background: #f2d27d; color: #49350c; font-size: 11px; font-weight: 700; line-height: 1.5; white-space: nowrap; vertical-align: middle; }
.dashboard-races-grid .dashboard-quality-race { border-color: #e6cf9c; border-left-color: #bc8b23; background: #fffdf6; }
.dashboard-quality-race .dashboard-race-card-footer > .race-quality-type-badge { flex: 0 0 auto; margin-right: auto; padding: 0 6px; line-height: 18px; }
.race-visibility-badge.is-public { color: #495e54; background: #edf1ef; }
.race-visibility-badge.is-private, .dashboard-race-card-heading > .race-visibility-badge.is-private { color: #1e40af; background: #dbeafe; }
.race-quality-value { font-variant-numeric: tabular-nums; }
.race-leaderboard-table tr.is-current-user td { background: #edf6f1; }
.races-page { gap: 32px; }
.races-page-heading { margin-bottom: 0; }
.race-ranking-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; padding: 18px 16px; border-block: 3px solid #79a994; border-inline: 0; background: #f5f8f6; color: var(--text); text-decoration: none; }
.race-ranking-summary:hover, .race-ranking-summary:focus-visible { background: #edf4ef; color: var(--text); }
.year-filter.ranking-period-filter { width: 220px; max-width: 100%; margin: 0 auto 16px 0; }
.ranking-period-filter .choices, .ranking-period-filter select { width: 100%; min-width: 0; margin-bottom: 0; }
.race-ranking-stat { display: grid; gap: 5px; min-width: 0; padding: 0 12px; text-align: center; }
.race-ranking-stat + .race-ranking-stat { border-left: 1px solid #d9e4de; }
.race-ranking-stat > span { color: var(--muted); font-size: 13px; }
.race-ranking-stat > strong { font-size: 26px; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.race-ranking-summary-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; gap: 8px; border-left: 1px solid #d9e4de; color: var(--primary); font-size: 14px; font-weight: 650; }
.race-ranking-summary-link > .fa-ranking-star { font-size: 16px; }
.race-ranking-summary-link > .fa-arrow-right { font-size: 12px; }
.user-ranking-page, .user-ranking-page .table-wrap { min-width: 0; max-width: 100%; }
.user-ranking-table { width: 100%; min-width: 0; table-layout: fixed; }
.user-ranking-table th:first-child { width: 80px; }
.user-ranking-table th:last-child { width: 130px; }
.user-ranking-table th:last-child, .user-ranking-table td:last-child { text-align: right; }
.user-ranking-table td { font-variant-numeric: tabular-nums; white-space: normal; overflow-wrap: anywhere; }
.race-points-value[aria-label] { cursor: help; }
.race-points-value:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.user-ranking-table td:nth-child(2) { white-space: normal; overflow-wrap: anywhere; }
.user-ranking-table tr.is-current-user td { background: #edf6f1; }
.user-ranking-table .user-ranking-gap td { text-align: center; color: var(--muted); padding-block: 6px; }
@media (max-width: 640px) {
    .race-ranking-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; padding: 16px; }
    .race-ranking-summary-link { grid-column: 1 / -1; min-height: 34px; padding: 12px 0 0; border-left: 0; border-top: 1px solid #d9e4de; }
}
@media (max-width: 480px) {
    .user-ranking-table th:first-child { width: 64px; }
    .user-ranking-table th:last-child { width: 88px; }
}
.race-page-section > h2, .race-catalog-heading h2 { font-size: var(--section-title-size); }
.race-invitation-item, .active-race-item { border-color: var(--line); border-radius: 6px; box-shadow: none; background: white; }
.active-race-heading { border-left: 4px solid var(--primary); background: #fafcfb; padding: 20px 24px; border-radius: 5px 5px 0 0; }
.race-item-heading h3 { font-size: 20px; }
.race-detail-page { gap: 28px; }
.race-detail-heading { border: 0; box-shadow: none; padding: 0; background: transparent; }
.race-detail-heading .active-race-heading { border-left: 0; padding: 0 0 24px; background: transparent; border-bottom: 1px solid var(--line); border-radius: 0; }
.race-detail-heading .race-item-heading h1 { font-size: var(--page-title-size); }
.race-detail-leaderboard { border: 0; border-radius: 0; background: transparent; padding: 0; box-shadow: none; }
.active-race-item.is-quality-race, .race-invitation-item.is-quality-race { border-color: #e6cf9c; }
.is-quality-race > .active-race-heading { border-left-color: #bc8b23; background: #fffdf6; }
.race-detail-heading.is-quality-race > .active-race-heading { border-bottom-color: #bc8b23; }
.race-invitation-item.is-quality-race, .home-race-row.is-quality-race { background: #fffdf6; box-shadow: inset 4px 0 #bc8b23; }
.activity-table > tbody > tr.is-quality-race > td { background: #fffdf6; }
.activity-table > tbody > tr.is-quality-race > td:first-child { box-shadow: inset 4px 0 #bc8b23; }
.activity-table > tbody > tr.is-quality-race:hover > td { background: #fcf3df; }

/* Existing form, calendar and modal behavior is shared across all pages. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]), select, textarea, .choices__inner { border-radius: 5px; border-color: #d3dcd7; }
input[type=submit], button[type=submit], .primary-link-button, .secondary-link-button, .secondary-button, .danger-button { border-radius: 5px; }
.settings-tabs { position: static; display: flex; gap: 24px; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.settings-tab, .settings-tab.is-active { position: static; min-height: 45px; padding: 0 0 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; font-size: 14px; color: var(--muted); box-shadow: none; }
.settings-tab + .settings-tab { margin: 0; }
.settings-tab.is-active { border-bottom-color: var(--primary); color: var(--primary); }
.settings-tab:not(.is-active):hover { background: transparent; color: var(--text); }
.settings-section { border: 0; border-radius: 0; padding: 28px 0 0; background: transparent; }
.settings-section > .section-heading .section-icon-button { position: static; }
.settings-section > .section-heading { display: flex; align-items: center; justify-content: space-between; }
.settings-subsection, .settings-subsection:first-of-type { min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.settings-subsection + .settings-subsection { margin-top: 28px; }
.settings-subsection > h3 { margin: 0 0 12px; color: var(--text); font-size: 17px; font-weight: 700; }
.settings-subsection-content { position: relative; min-width: 0; margin: 0; padding: 20px; border: 1px solid #dce4df; border-radius: 6px; background: #fafcfb; }
.settings-subsection-content > p:first-child { margin-top: 0; }
.settings-subsection-content > p:last-child { margin-bottom: 0; }
.admin-message-translations { min-width: 0; margin-bottom: 16px; }
.admin-message-form .admin-message-tabs { display: flex; margin-bottom: 20px; }
.admin-message-translations fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.admin-message-translations legend { padding: 0; margin-bottom: 12px; font-weight: 600; }
.admin-message-field { margin-bottom: 12px; }
.admin-message-field label { display: block; }
.admin-message-translations input, .admin-message-translations textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
.admin-message-translations textarea { resize: vertical; min-height: 140px; }
.admin-message-translations [hidden] { display: none !important; }
.message-editor-shell { margin-top: 6px; border: 1px solid #acb8b1; border-radius: 4px; background: #fff; overflow: hidden; }
.message-editor-shell:focus-within { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.message-editor-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid #d9e2dd; background: #f5f8f6; }
.message-editor-toolbar select { box-sizing: border-box; width: 80px; height: 32px; min-height: 0; margin: 0 4px 0 0; padding: 2px 6px; font-size: 14px; border: 1px solid #acb8b1; border-radius: 3px; background: #fff; color: #45564f; }
.message-editor-toolbar .icon-button { width: 30px; height: 32px; min-width: 30px; padding: 0; border-radius: 3px; color: #45564f; background: transparent; }
.message-editor-toolbar .icon-button:hover, .message-editor-toolbar .icon-button[aria-pressed="true"] { color: #07664c; background: #dfede5; }
.message-editor-canvas.ql-container { font: inherit; }
.message-editor-canvas .ql-editor { min-height: 160px; max-height: 320px; padding: 12px; line-height: 1.5; font-size: 16px; overflow-wrap: anywhere; white-space: pre-wrap; }
.message-editor-canvas .ql-editor p { margin: 0; color: inherit; }
.message-editor-canvas .ql-editor a { color: var(--primary); text-decoration: underline; }
.message-editor-link { display: grid; grid-template-columns: minmax(0, 1fr) 32px 32px; align-items: center; gap: 6px; padding: 8px; border-bottom: 1px solid #d9e2dd; }
.message-editor-link label, .message-editor-link-error { grid-column: 1 / -1; font-size: 13px; }
.message-editor-link input { margin: 0; min-width: 0; }
.message-editor-link-error { color: #a32929; }
.message-editor-error { margin-top: 6px; font-size: 13px; color: #a32929; }
@media (max-width: 400px) {
    .message-editor-toolbar { gap: 1px; padding: 4px; }
    .message-editor-toolbar .icon-button { box-sizing: border-box; width: 28px; min-width: 28px; }
}
.settings-save-subsection .settings-subsection-content { padding-right: 126px; }
.settings-preferences-subsection .settings-subsection-content { padding-right: 20px; }
[data-settings-save-anchor] { position: relative; min-width: 0; }
.settings-save-state { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 3px 6px; border-radius: 3px; background: #fff; color: var(--muted); font-size: 11px; line-height: 12px; }
.settings-save-state [data-settings-save-status] { white-space: nowrap; font-weight: 400; color: inherit; }
.settings-save-state:has([data-settings-save-status]:empty) { display: none; }
[data-save-state="error"] > .settings-save-state { position: static; color: #a52a30; font-size: 12px; line-height: 1.5; margin-top: 8px; max-width: 100%; }
[data-save-state="error"] > .settings-save-state [data-settings-save-status] { white-space: normal; }
[data-autosave-bound] .settings-manual-save { display: none; }
.settings-save-state [data-settings-save-retry] { padding: 0; font-size: 12px; }
.settings-save-state [data-settings-save-retry][hidden] { display: none; }
.settings-save-subsection input[type=submit] { right: 20px; top: 20px; min-height: 38px; padding: 8px 14px; font-size: 13px; }
.settings-section .section-title { font-size: 20px; }
.connected-account { background: transparent; border-color: var(--line); box-shadow: none; }
.settings-subsection .connected-account { margin: 0; padding: 0; border: 0; border-radius: 0; }
.settings-language-row .date-controls-wrapper { width: 130px; max-width: 100%; }
.admin-strava-sync-row .date-controls-wrapper { flex: 0 1 150px; width: 150px; max-width: 100%; }
.detail-grid, .detail-grid.compact { background: #fafbfa; border-color: var(--line); border-radius: 5px; }
.activity-detail-nav { margin-bottom: 24px; }
.activity-detail-header h1 { font-size: var(--page-title-size); }
.modal { border-radius: 8px; border-color: var(--line); box-shadow: 0 24px 80px #101e1833; }
.modal::backdrop { background: #14251d66; backdrop-filter: blur(2px); }
.modal-heading { background: var(--surface); border-bottom: 1px solid var(--line); }
.modal-heading h2 { font-size: 21px; }
.modal-select-dropdown[popover] { position: fixed; inset: auto; display: flex; flex-direction: column; margin: 0; padding: 0; max-height: 320px; box-sizing: border-box; overflow: hidden; border-radius: 6px; color: var(--text); }
.modal-select-dropdown[popover]:not(:popover-open) { display: none; }
.modal-select-dropdown[popover] > .choices__list { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
.modal-select-dropdown[popover] > .choices__input { flex: 0 0 auto; }
.flatpickr-calendar.modal-calendar-popup[popover] { position: fixed; inset: auto; margin: 0; padding: 0; border: 0; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; animation: none; transform: none; }
.modal-calendar-popup[popover]:not(:popover-open) { display: none; }
.modal-calendar-popup[popover]::before, .modal-calendar-popup[popover]::after { display: none; }
.modal-calendar-popup[popover] .flatpickr-rContainer { width: 100%; min-width: 0; }
.modal-calendar-popup[popover] .flatpickr-days, .modal-calendar-popup[popover] .dayContainer { width: 100%; min-width: 0; max-width: 100%; }
.modal-calendar-popup[popover] .dayContainer { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.modal-calendar-popup[popover] .flatpickr-day { width: 100%; max-width: none; }
.icon-tooltip-panel { inset: auto; margin: 0; background: #252e29; border-radius: 4px; font-size: 12px; }
.messages-list { display: grid; gap: 12px; overflow: visible; border: 0; border-radius: 0; background: transparent; }
.message-row { position: relative; min-width: 0; overflow: hidden; padding: 22px 20px; border: 1px solid #d9e2dd; border-radius: 6px; background: #f8faf9; transition: background-color 140ms ease; }
.message-row:last-child { border-bottom: 1px solid #d9e2dd; }
.message-row.is-unread { background: #f4f9f6; border-left: 3px solid var(--primary); padding-left: 18px; }
.message-row:hover, .message-row:focus-within { background: #f1f5f3; }
.message-row.is-unread:hover, .message-row.is-unread:focus-within { background: #eaf2ee; }
.message-row h2 { margin: 0 0 14px; font-size: 19px; font-weight: 750; color: var(--text); overflow-wrap: anywhere; }
.message-row p { font-weight: 400; }
.message-row { scroll-margin-top: 100px; }
.message-body { overflow: hidden; }
.message-content { font-weight: 400; line-height: 1.5; overflow-wrap: anywhere; color: var(--muted); }
.message-content.is-plain { white-space: pre-wrap; }
.message-content.is-rich p { white-space: normal; margin: 0 0 12px; line-height: inherit; }
.message-content.is-rich ul, .message-content.is-rich ol { margin: 0 0 12px; padding-left: 24px; }
.message-content.is-rich > :last-child { margin-bottom: 0; }
.message-body.is-collapsed .message-content { max-height: 3em; overflow: hidden; }
.message-body.is-collapsed.has-overflow { -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent var(--message-fade-end, 90%)); mask-image: linear-gradient(to bottom, #000 0%, transparent var(--message-fade-end, 90%)); }
.message-expand-bar { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; min-height: 40px; background: linear-gradient(to bottom, transparent, rgba(35, 55, 46, 0.045) 70%); }
.message-row:has(.message-expand[aria-expanded="true"]:not([hidden])) { padding-bottom: 54px; }
.message-expand { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 40px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--muted); cursor: pointer; transition: background-color 140ms ease; }
.message-expand i { flex: 0 0 18px; font-size: 14px; transition: transform 260ms ease-in-out; }
.message-expand[aria-expanded="true"] i { transform: rotate(180deg); }
.message-expand:hover, .message-expand:focus-visible { background: linear-gradient(to bottom, transparent, rgba(35, 55, 46, 0.085) 70%); color: var(--primary); }
.message-expand:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; }
.message-expand[hidden], .message-expand-bar[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .message-expand i { transition: none; } }
.contact-page { max-width: 800px; margin-left: 0; }
.contact-form { margin-top: 28px; }
.contact-form label > span { font-size: 13px; }
.auth { max-width: 440px; padding: 28px 0; border: 0; border-radius: 0; margin: 48px auto; }
.auth h1 { margin-bottom: 32px; }
.registration-confirmation { display: flex; align-items: flex-start; gap: 16px; padding: 22px 20px; border: 1px solid #b9d8c8; border-left: 4px solid var(--primary); border-radius: 6px; background: #edf7f1; }
.registration-confirmation > i { flex: 0 0 24px; width: 24px; margin-top: 3px; color: var(--primary); font-size: 24px; }
.registration-confirmation > div { min-width: 0; }
.registration-confirmation h2 { margin: 0 0 10px; color: #245440; font-size: 20px; line-height: 1.35; }
.registration-confirmation p { margin: 0; color: #304d3e; font-size: 14px; line-height: 1.6; }
.registration-sign-in-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px; color: var(--primary); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.registration-sign-in-link:hover { color: var(--primary-hover); }
.registration-resend-form { margin: 18px 0 0; }
.registration-resend-form .text-link-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 8px 0; color: var(--primary); text-align: left; }
.registration-resend-form .text-link-button:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.registration-resend-wait { margin: 4px 0 0; font-size: 12px; }
.auth form table, .auth form tbody, .auth form tr, .auth form th, .auth form td { display: block; width: 100%; }
.auth form th { text-align: left; padding: 0 0 7px; font-size: 13px; }
.auth form th:empty { display: none; }
.auth form td { padding: 0 0 20px; }
.auth input:not([type=checkbox]):not([type=radio]), .auth button[type=submit] { width: 100%; }
.auth-links { font-size: 13px; }
.race-rules-page { max-width: 960px; }
.race-rules-header h1, .not-found-page h1 { font-size: var(--page-title-size); }
.race-rules-section h2 { font-size: var(--section-title-size); }
.race-rules-section { border-color: var(--line); }
.not-found-page { min-height: 55vh; }

.public-home { gap: 56px; }
.public-hero { position: relative; display: flex; align-items: flex-end; min-height: 440px; height: min(620px, calc(100svh - 260px)); border-radius: 0; box-shadow: none; background: #17251c url('img/home-runners-virtual.webp') center / cover no-repeat; isolation: isolate; }
.public-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #101d1966; }
.public-hero-copy { display: block; min-height: 0; max-width: 620px; padding: 48px; background: transparent; }
.public-hero-visual { display: none; }
.public-hero h1 { font-size: 44px; line-height: 1.12; max-width: 600px; color: white; }
.public-hero h1 strong { color: white; }
.public-hero p { font-size: 16px; max-width: 460px; color: #eef3f0; }
.public-hero-actions { margin-top: 24px; }
.public-hero .secondary-link-button { color: white; border-color: #ffffff88; background: transparent; }
.public-race-showcase { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.public-race-showcase-copy { padding: 24px 0 24px 36px; }
.public-feature-grid > div { border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; background: transparent; padding: 24px 0; }

@media (min-width: 1400px) {
    .is-authenticated .page { width: min(1320px, calc(100% - 80px)); }
    .app-utilities { right: 40px; }
}
@media (min-width: 769px) {
    @supports (grid-template-rows: subgrid) {
        .dashboard-races-grid { grid-template-rows: repeat(var(--dashboard-race-rows, 3), auto); row-gap: 16px; }
        .dashboard-races-grid > section { display: grid; grid-template-rows: subgrid; grid-row: 1 / span var(--dashboard-race-rows, 3); }
        .dashboard-races-grid > section:first-child { grid-column: 1; }
        .dashboard-races-grid > section:last-child { grid-column: 2; }
        .dashboard-races-grid > section > h2 { margin-bottom: 0; }
        .dashboard-active-race-list, .dashboard-open-race-list { display: contents; }
    }
}
@media (min-width: 769px) and (max-width: 1100px) {
    :root { --sidebar-width: 184px; }
    .page { width: calc(100% - 40px); }
    .is-authenticated .top-nav .nav-item { gap: 10px; padding-left: 18px; }
    .sidebar-account { margin-left: 22px; }
    .sidebar-profile { gap: 10px; }
    .dashboard-active-race, .dashboard-open-race, .dashboard-open-race.has-countdown { padding: 16px; }
    .dashboard-race-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
    .dashboard-race-placement { grid-column: 1 / -1; }
    .dashboard-race-metrics > .dashboard-race-metric:nth-child(2) { border-left: 0; }
    .stat { padding: 0 12px; }
    .stat strong { font-size: 21px; }
    .dashboard-race-card-heading { flex-wrap: wrap; }
}
@media (max-width: 768px) {
    :root { --page-title-size: 30px; --section-title-size: 20px; }
    body { padding-bottom: calc(36px + env(safe-area-inset-bottom)); }
    .is-authenticated { padding-left: 0; padding-bottom: calc(102px + env(safe-area-inset-bottom)); }
    .page, .is-authenticated .page { width: calc(100% - 32px); margin: 24px auto 40px; }
    .is-authenticated .page:has(.activity-detail-nav) { margin-top: 24px; }
    .is-authenticated .page > .dashboard-heading:first-child,
    .is-authenticated .page > .panel:first-child > .dashboard-heading:first-child,
    .is-authenticated .races-page-heading,
    .is-authenticated .messages-page-heading,
    .is-authenticated .contact-page > h1 { padding-right: 0; }
    .is-authenticated .topbar, .is-guest .topbar { position: sticky; inset: 0 0 auto; z-index: 120; display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; height: 66px; min-height: 66px; padding: 12px 16px; gap: 10px; background: white; border-bottom: 1px solid var(--line); }
    .is-authenticated .brand { margin: 0; align-self: auto; }
    .brand img { width: 84px; height: 42px; }
    .is-authenticated .brand img { filter: none; }
    .app-utilities { position: fixed; top: 13px; right: 16px; z-index: 125; height: 40px; gap: 12px; }
    .app-utilities .account-summary { display: flex; padding: 0; border: 0; }
    .app-utilities .message-popover { top: 46px; right: 0; }
    .viewed-user-label { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .is-authenticated .topbar.is-menu-open, .is-guest .topbar.is-menu-open { z-index: 1200; }
    .is-authenticated .top-nav, .is-guest .topbar nav { position: fixed; inset: 0 0 0 auto; z-index: 1100; width: min(320px, 88vw); height: 100dvh; min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 74px 12px 24px 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; background: #1c1f1e; border: 0; transform: translateX(100%); transition: transform 180ms ease; }
    .is-authenticated .top-nav, .is-guest .topbar nav { box-shadow: none; }
    .is-authenticated .topbar.is-menu-open .top-nav, .is-guest .topbar.is-menu-open nav { transform: translateX(0); box-shadow: -12px 0 36px #18201b22; }
    .topbar .mobile-menu-close { position: absolute; top: 16px; right: 16px; background: transparent; color: white; border: 1px solid #4b5650; border-radius: 5px; }
    .is-authenticated .top-nav .nav-item { min-height: 48px; justify-content: center; padding: 10px 16px; gap: 14px; }
    .is-authenticated .top-nav .nav-item span { min-width: 110px; text-align: left; }
    /* Match the centered menu's icon, gap and label tracks, including its left border. */
    .sidebar-account { flex-shrink: 0; min-height: 60px; margin: 10px 12px 0 calc((100% - 22px - 14px - 110px) / 2 + 2px); }
    .sidebar-account .logout-link-button { min-width: 40px; }
    .is-guest .topbar nav { padding-left: 20px; padding-right: 20px; gap: 12px; }
    .is-guest .topbar nav a { color: #eaf0ec; justify-content: center; }
    .is-guest .topbar nav a:hover { background: #303a34; }
    .is-guest .topbar nav a.is-active { background: #163e32; }
    .is-guest .topbar nav .language-switcher { margin-top: 12px; }
    .bottom-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; z-index: 120; inset: auto 0 calc(36px + env(safe-area-inset-bottom)); height: 66px; padding: 0 6px; background: white; border-top: 1px solid var(--line); }
    .bottom-nav a, .bottom-nav button { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; gap: 5px; margin: 0; padding: 8px 0; border: 0; background: transparent; color: #68716e; font-size: 10px; font-weight: 500; line-height: 1.2; text-decoration: none; }
    .bottom-nav i { font-size: 20px; height: 21px; }
    .bottom-nav a.is-active, .bottom-nav a:hover, .bottom-nav button:hover, .bottom-nav button[aria-expanded=true] { color: var(--primary); background: #f5faf7; }
    .site-footer, .is-authenticated .site-footer { left: 0; height: calc(36px + env(safe-area-inset-bottom)); min-height: 36px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); font-size: 10px; }
    .cookie-notice { bottom: calc(48px + env(safe-area-inset-bottom)); }
    .is-authenticated .cookie-notice { left: 16px; bottom: calc(114px + env(safe-area-inset-bottom)); }
    .flash-stack { top: 76px; }
    .panel, .auth { padding: 0; }
    .panel + .panel { margin-top: 28px; }
    .dashboard-heading { align-items: flex-start; gap: 12px; margin-bottom: 28px; }
    .overview-heading { flex-direction: row; align-items: center; }
    .overview-heading .dashboard-actions { gap: 6px; justify-content: flex-end; max-width: 52%; }
    .overview-heading .secondary-link-button { min-height: 32px; padding: 6px 9px; font-size: 11px; }
    .strava-connect-button { min-height: 38px; padding: 8px 10px; font-size: 12px; }
    .activities-import-actions { gap: 10px 16px; }
    #settings-strava { scroll-margin-top: 84px; }
    .dashboard-races-heading { flex-direction: row; align-items: center; min-height: 30px; margin-bottom: 16px; padding: 0; gap: 6px; }
    .dashboard-races-all-link { font-size: 11px; gap: 5px; }
    .dashboard-races-grid { grid-template-columns: 1fr; gap: 20px; }
    .dashboard-races-grid > section > h2 { font-size: 16px; line-height: 1.4; margin-bottom: 10px; }
    .dashboard-active-race, .dashboard-open-race, .dashboard-open-race.has-countdown { min-height: 0; padding: 18px 16px; border-left-width: 5px; flex-wrap: nowrap; }
    .dashboard-race-card-heading h3, .dashboard-open-race .race-item-heading h3 { font-size: 21px; }
    .dashboard-race-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 18px 0 4px; row-gap: 16px; }
    .dashboard-race-placement { grid-column: 1 / -1; }
    .dashboard-race-placement strong { font-size: 28px; }
    .dashboard-race-metrics > .dashboard-race-metric:nth-child(2) { border-left: 0; }
    .dashboard-race-metric strong { font-size: 24px; }
    .dashboard-race-card-footer { flex-wrap: wrap; padding-top: 18px; }
    .dashboard-race-card-footer .dashboard-open-race-action { margin-left: auto; width: auto; flex-wrap: wrap; }
    .dashboard-active-race > .dashboard-open-race-action { width: auto; margin: 16px 0 0; }
    .dashboard-countdown-line { margin-top: 18px; gap: 8px; }
    .dashboard-countdown-line > i { font-size: 21px; }
    .dashboard-race-countdown { font-size: 16px; }
    .dashboard-race-date, .dashboard-open-race .race-meta-line { font-size: 12px; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; margin-bottom: 24px; }
    .stat { padding: 0 12px; }
    .stat strong { font-size: 22px; }
    .stat-label { font-size: 11px; }
    .dashboard-races-panel + .dashboard-activity-section { margin-top: 28px; padding-top: 28px; }
    .dashboard-activity-heading h2 { grid-column: 1 / -1; font-size: 20px; }
    .dashboard-activity-heading > a { grid-row: 2; }
    .dashboard-summary-date { font-size: 12px; }
    .dashboard-measurements-heading { flex-direction: row; }
    .dashboard-measurements-title-row h2 { font-size: 21px; }
    #measurements { scroll-margin-top: 84px; }
    .activity-table { min-width: 0; }
    .activity-table th { padding: 10px 8px; }
    .activity-table td { padding: 10px 8px; }
    .stats-table-scroll .activity-table th:first-child, .stats-table-scroll .activity-table td:first-child { width: 1%; }
    .activity-table th, .activity-table td:not(.activity-name-cell) { white-space: nowrap; overflow-wrap: normal; }
    .activity-table td.activity-name-cell { white-space: normal; overflow-wrap: anywhere; }
    .stats-table-scroll .activity-name-cell { min-width: 110px; max-width: 160px; }
    .user-ranking-table { table-layout: auto; }
    .activity-filters { gap: 14px; padding-bottom: 10px; }
    .activity-filters > label { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; column-gap: 12px; }
    .activity-filters > label > span { margin-bottom: 0; }
    .activity-filters > label > .choices, .activity-filters > label > .date-controls-wrapper, .activity-filters > label > input:not([type="hidden"]), .activity-filters > label > select { grid-column: 2; min-width: 0; width: 100%; }
    .activity-filters > .filter-actions { margin-top: -6px; padding-left: 0; align-items: flex-end; }
    .activity-filters .filter-clear-link { padding: 0; }
    .settings-tabs { display: none; }
    .settings-tab-select { position: static; width: 100%; margin: 0 0 12px; }
    .settings-section { padding-top: 18px; }
    .settings-subsection-content, .settings-save-subsection .settings-subsection-content { padding: 16px; }
    .settings-preferences-subsection .settings-profile-form { padding-right: 0; }
    .settings-save-subsection input[type=submit] { position: static; margin-top: 14px; }
    .settings-subsection > h3 { font-size: 16px; }
    .admin-strava-sync-row { column-gap: 10px; }
    .admin-strava-sync-row button[type=submit] { font-size: 12px; padding: 9px 12px; }
    .year-filter { width: auto; }
    .race-detail-heading .active-race-heading { padding: 0 0 20px; }
    .active-race-heading { padding: 16px; }
    .active-race-heading .race-participation-actions { justify-content: flex-start; }
    .race-catalog-controls { flex-direction: column; align-items: stretch; gap: 14px; }
    .race-catalog-controls .race-filter-tabs { width: 100%; }
    .race-period-filter-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
    .race-visibility-filter-tabs .race-filter-tab { min-height: 40px; padding: 7px 8px; }
    .contact-fields { grid-template-columns: 1fr; }
    .contact-page { width: 100%; }
    .auth { margin: 32px auto; }
    .auth form tr { display: block; margin-bottom: 0; }
    .auth form th { padding-bottom: 7px; }
    .auth form td { padding-bottom: 20px; }
    .public-home { gap: 32px; }
    .public-hero { margin: -24px -16px 0; min-height: 0; height: min(610px, 76svh); background-position: 58% center; }
    .public-hero-copy { padding: 28px 24px; }
    .public-hero h1 { font-size: 34px; max-width: 360px; }
    .public-hero p { font-size: 14px; }
    .public-hero-actions { margin-top: 18px; flex-wrap: wrap; }
    .public-race-showcase-copy { padding: 24px 0 0; }
    .public-race-showcase-copy h2 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

.page .page-title-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; width: 100%; padding-right: 0; }
.page-title-toolbar h1 { margin: 0; }
.race-points-formulas { margin: 20px 0; }
.race-points-formulas > summary { width: fit-content; max-width: 100%; cursor: pointer; color: var(--primary); font-weight: 700; padding: 6px 0; }
.page-title-toolbar .page-title-action { justify-self: end; max-width: 100%; margin: 0; }
.page-title-toolbar .page-title-description { grid-column: 1 / -1; margin: 0; }
@media (min-width: 769px) {
    .is-authenticated .page:has(.page-title-toolbar) { margin-top: 48px; }
    .app-utilities { top: 10px; right: 16px; height: 36px; }
    .app-utilities .message-notification-trigger { width: 36px; height: 36px; min-height: 36px; font-size: 22px; }
    .app-utilities .message-notification-trigger:focus-visible { outline-offset: -2px; }
    .app-utilities .message-popover { top: 44px; }
}
@media (max-width: 768px) {
    .page .page-title-toolbar { column-gap: 12px; }
    .page-title-toolbar .race-rules-link { font-size: 12px; }
    .page-title-toolbar .year-filter label { flex-direction: column; align-items: flex-end; gap: 3px; }
    .page-title-toolbar .year-filter select, .page-title-toolbar .year-filter .choices { width: 128px; min-width: 128px; font-size: 12px; }
    .page-title-toolbar .year-filter .choices__inner { min-height: 38px; font-size: 12px; }
    .page-title-toolbar .year-filter .choices__list--single { white-space: nowrap; }
}