:root {
    --mh-red: #e31507;
    --mh-canvas: #f3f5fa;
    --mh-panel: #fff;
    --mh-inset: #f7f8fc;
    --mh-border: #dfe4ef;
    --mh-text: #040727;
    --mh-secondary: #536078;
    --mh-accent-text: #a91710;
    --mh-active: #ffebe9;
    --mh-radius: 16px;
    --mh-shadow: 0 3px 14px rgb(30 81 108 / 6%);
}

:root.dark {
    --mh-canvas: #0c1027;
    --mh-panel: #151a35;
    --mh-inset: #1d2342;
    --mh-border: #343e60;
    --mh-text: #eef2ff;
    --mh-secondary: #b9c4dc;
    --mh-accent-text: #ffaaa4;
    --mh-active: #48272e;
    --mh-shadow: 0 3px 14px rgb(0 0 0 / 14%);
}

.fi-body {
    background: var(--mh-canvas);
    color: var(--mh-text);
}

.fi-topbar, .fi-sidebar {
    background: var(--mh-panel);
}

.fi-topbar { border-bottom: 1px solid var(--mh-border); }
.fi-sidebar { border-inline-end: 1px solid var(--mh-border); }
.dark .fi-topbar, .dark .fi-sidebar { background: var(--mh-panel); }

.fi-sidebar-item-btn {
    min-height: 46px;
    border-radius: 999px;
    gap: 10px;
}

.fi-sidebar-item-btn:hover { background: var(--mh-inset); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--mh-active);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-icon { color: var(--mh-accent-text); }

.fi-header-heading { letter-spacing: -.025em; }
.mh-brand small { color: var(--mh-secondary); }

.fi-ta-ctn, .fi-section, .fi-modal-window, .fi-dropdown-panel,
.fi-simple-main, .mh-roster, .mh-detail-section {
    background: var(--mh-panel);
    border-radius: var(--mh-radius);
}

.fi-ta-ctn, .fi-section, .fi-modal-window, .fi-simple-main,
.mh-detail-section, .mh-roster { border: 1px solid var(--mh-border); }
.fi-ta-ctn, .fi-simple-main, .mh-race-overview, .mh-race-roster, .mh-roster {
    box-shadow: var(--mh-shadow);
}
.fi-ta-header-cell, .fi-input-wrp, .fi-tabs-item.fi-active { background: var(--mh-inset); }
.fi-ta-table > thead, .fi-ta-row, .fi-ta-header-toolbar,
.fi-section-header, .fi-modal-footer, .mh-row { border-color: var(--mh-border); }
.fi-ta-table .fi-ta-row:hover { background: var(--mh-inset); }
.mh-muted, .mh-legend, .mh-detail-section dt, .mh-person small { color: var(--mh-secondary); }
.mh-toolbar select, .mh-toolbar input { background: var(--mh-panel); border-color: var(--mh-border); }

.mh-hero {
    background: var(--mh-panel);
    color: var(--mh-text);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius);
    box-shadow: var(--mh-shadow);
}

.mh-hero p { color: var(--mh-secondary); }
.mh-hero .mh-eyebrow { color: var(--mh-accent-text); }
.mh-attendance-summary > div {
    background: var(--mh-metric-bg);
    color: var(--mh-metric-fg);
    border-color: transparent;
    border-radius: 12px;
}

.mh-attendance-summary > div:nth-child(1) { --mh-metric-bg: #def6ed; --mh-metric-fg: #16634d; }
.mh-attendance-summary > div:nth-child(2) { --mh-metric-bg: #fff3d9; --mh-metric-fg: #835508; }
.mh-attendance-summary > div:nth-child(3) { --mh-metric-bg: #ffe9e3; --mh-metric-fg: #9b3524; }
.dark .mh-attendance-summary > div:nth-child(1) { --mh-metric-bg: #203f39; --mh-metric-fg: #9de5ca; }
.dark .mh-attendance-summary > div:nth-child(2) { --mh-metric-bg: #493e2b; --mh-metric-fg: #ffe1a4; }
.dark .mh-attendance-summary > div:nth-child(3) { --mh-metric-bg: #4a3335; --mh-metric-fg: #ffc2b1; }

.mh-race-overview { border-inline-start: 4px solid var(--mh-red); }
.mh-race-roster { padding: clamp(12px, 3vw, 22px); }
.mh-race-pill, .mh-lineup-group, .mh-contact-card, .mh-detail-portrait,
.mh-race-lineup[open] summary { background: var(--mh-inset); }
.mh-race-lineup, .mh-lineup-group dl > div, .mh-detail-tabs { border-color: var(--mh-border); }
.mh-race-lineup summary:hover { background: var(--mh-inset); }
.mh-detail-tabs button[aria-selected="true"] {
    background: var(--mh-active);
    color: var(--mh-accent-text);
}

.mh-theme-switch, .mh-contact-actions a { background: var(--mh-inset); border-color: var(--mh-border); }
.mh-settings-card { border-color: var(--mh-border); }
.mh-settings-card:hover, .mh-contact-actions a:hover { background: var(--mh-active); }
.mh-contact-actions a, .dark .mh-contact-actions a { color: var(--mh-accent-text); }
.mh-race-pill { color: var(--mh-accent-text); }
.fi-topbar { box-shadow: var(--mh-shadow); }

/* Match the application surfaces in dark mode, including components with dark defaults. */
.dark :is(.fi-ta-ctn, .fi-section, .fi-modal-window, .fi-dropdown-panel, .fi-simple-main, .mh-roster) {
    background: var(--mh-panel);
}
.dark :is(.fi-input-wrp, .fi-ta-header-cell, .mh-race-pill, .mh-lineup-group, .mh-contact-card,
    .mh-detail-portrait, .mh-avatar, .mh-status:not([aria-pressed="true"])) {
    background: var(--mh-inset);
}
.dark :is(.mh-roster, .mh-row, .mh-detail-section, .mh-race-lineup, .mh-lineup-group dl > div,
    .mh-detail-tabs, .mh-settings-card, .mh-contact-actions a, .mh-theme-switch) {
    border-color: var(--mh-border);
}
.dark .mh-race-overview { border-inline-start-color: var(--mh-red); }
.dark :is(.mh-muted, .mh-legend, .mh-detail-section dt, .mh-person small, .mh-brand small) {
    color: var(--mh-secondary);
}
.dark .mh-toolbar select { background: var(--mh-panel); }
.dark .mh-detail-tabs button[aria-selected="true"] { background: var(--mh-active); color: var(--mh-accent-text); }

@media (max-width: 700px) {
    .mh-hero { padding: 18px; }
    .mh-race-detail, .mh-race-teams { gap: 12px; }
    .mh-members-table .fi-ta-table tbody > tr,
    .mh-races-table .fi-ta-table tbody > tr { border-bottom: 1px solid var(--mh-border); }
}

.mh-lineup-position.fi-fo-field-has-inline-label {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
    column-gap: 12px;
}

.mh-lineup-position.fi-fo-field-has-inline-label > .fi-fo-field-content-col {
    grid-column: 2;
    min-width: 0;
}

.mh-lineup-position > .fi-fo-field-label-col {
    padding-block-start: 8px;
    overflow-wrap: anywhere;
}

/* Shared navigation and compact content surfaces. */
.fi-sidebar, .dark .fi-sidebar {
    background: #040727;
    border-inline-end-color: #24294a;
}
.fi-sidebar .mh-brand span { color: white; }
.fi-sidebar .mh-brand small { color: #b9c4dc; }
.fi-sidebar .fi-sidebar-item-btn { min-height: 40px; border-radius: 9px; }
.fi-sidebar .fi-sidebar-item-btn :is(.fi-sidebar-item-label, .fi-icon),
.fi-sidebar .fi-sidebar-header .fi-icon { color: #d5def5; }
.fi-sidebar .fi-sidebar-item-btn:hover { background: #1d2342; }
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: #e31507; }
.fi-sidebar .fi-sidebar-item.fi-active :is(.fi-sidebar-item-label, .fi-icon) { color: white; }
.fi-header-heading { font-size: clamp(1.5rem, 3vw, 2rem); }
.fi-ta-cell .fi-ta-text { padding-block: .625rem; }
.mh-roster .mh-row { padding-block: .625rem; }
.mh-mobile-nav { display: none; }
.mh-event-card {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
    min-width: 0;
}
.mh-next-race { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.mh-next-race { justify-content: flex-start; }
.mh-event-main { min-width: 0; overflow-wrap: anywhere; }
.mh-event-main .fi-btn { margin-top: .5rem; }
.mh-calendar-date {
    display: grid;
    place-items: center;
    align-content: center;
    min-width: 3.5rem;
    padding: .35rem .5rem;
    border-radius: 10px;
    background: var(--mh-active);
    color: var(--mh-accent-text);
    font-size: .7rem;
    line-height: 1.2;
}
.mh-calendar-date strong { font-size: 1.35rem; line-height: 1.25; }
.mh-workspace-grid { display: grid; gap: 1rem; align-items: start; }
.mh-workspace-grid > * { min-width: 0; }
@media (min-width: 1100px) {
    .mh-workspace-grid { grid-template-columns: minmax(0, 1.8fr) minmax(220px, 1fr); }
}
@media (max-width: 1023px) {
    .mh-mobile-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: .25rem;
        padding: .375rem .5rem;
        background: #040727;
        color: #eaf0ff;
    }
    .mh-mobile-nav a {
        display: inline-flex;
        align-items: center;
        gap: .375rem;
        min-height: 40px;
        padding: .375rem .625rem;
        border-radius: 8px;
        font-size: .8rem;
    }
    .mh-mobile-nav a[aria-current="page"] { background: #e31507; color: white; }
    .mh-mobile-nav .fi-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
}

.mh-training-overview { display: grid; gap: 1rem; align-items: start; }
.mh-training-overview > * { min-width: 0; }
.mh-next-training { align-items: flex-start; }
.mh-next-training h3 { font-weight: 750; }
.mh-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
.mh-month-weekday { text-align: center; color: var(--mh-secondary); font-size: .75rem; }
.mh-month-day { min-width: 0; text-align: center; border-radius: 8px; background: var(--mh-inset); font-size: .85rem; }
.mh-month-day :is(a, time) { display: grid; min-height: 32px; place-items: center; }
.mh-month-day.has-training { background: var(--mh-active); color: var(--mh-accent-text); font-weight: 750; }
.mh-month-day a { border-radius: inherit; text-decoration: underline; text-underline-offset: 3px; }
.mh-month-day a:hover { text-decoration-thickness: 2px; }
.mh-month-day[aria-current=date] { box-shadow: inset 0 0 0 1px var(--mh-red); }
@media (min-width: 740px) {
    .mh-training-overview { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
.mh-roster [id^=treninky-] { scroll-margin-top: 6rem; }

.mh-training-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    color: var(--mh-secondary);
    font-size: .8125rem;
}
.mh-training-meta li { display: flex; align-items: baseline; gap: .375rem; min-width: 0; overflow-wrap: anywhere; }
.mh-training-meta strong { color: var(--mh-text); font-weight: 650; }
.mh-training-meta .fi-icon { width: 1rem; height: 1rem; flex: none; align-self: flex-start; margin-top: .1rem; }
.mh-training-counts { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--mh-border); }
.mh-training-counts [data-status=present] .fi-icon { color: #278364; }
.mh-training-counts [data-status=excused] .fi-icon { color: #ab710f; }
.mh-training-counts [data-status=absent] .fi-icon { color: var(--mh-accent-text); }
.dark .mh-training-counts [data-status=present] .fi-icon { color: #9de5ca; }
.dark .mh-training-counts [data-status=excused] .fi-icon { color: #ffe1a4; }

.mh-meta-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.mh-next-training :is(h2, h3) { font-weight: 750; }
.mh-next-training .mh-training-meta { margin-top: .375rem; }

.mh-event-actions { display: flex; gap: .25rem; align-items: center; }
.mh-event-list-row { align-items: center; flex-wrap: wrap; }
.mh-event-list-row > .mh-event-card { flex: 1 1 16rem; }
.mh-event-list-row .mh-event-actions { margin-inline-start: auto; }
.mh-event-title { font-weight: 750; }
.mh-event-title:hover { text-decoration: underline; }
.mh-event-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .375rem; }
.mh-event-tags li { padding: .125rem .5rem; border-radius: .5rem; background: var(--mh-active); color: var(--mh-accent-text); font-size: .6875rem; }
.mh-races-table thead { display: none; }
.mh-races-table .fi-ta-cell-location { width: 100%; }
.mh-races-table .fi-ta-cell-location .mh-event-card { padding: .625rem 1rem; }
.mh-month-day details { position: relative; }
.mh-month-day summary { display:grid; place-items:center; min-height:32px; cursor:pointer; list-style:none; }
.mh-month-day summary::-webkit-details-marker { display:none; }
.mh-month-links { position:absolute; z-index:5; top:100%; inset-inline-end:0; width:min(12rem, 55vw); background:var(--mh-panel); border:1px solid var(--mh-border); border-radius:8px; box-shadow:var(--mh-shadow); }
.mh-month-links a { padding:.375rem; overflow-wrap:anywhere; }
.mh-month-day:nth-child(7n + 1) .mh-month-links, .mh-month-day:nth-child(7n + 2) .mh-month-links { inset-inline:0 auto; }
@media (max-width: 700px) {
    .mh-event-card { grid-template-columns: 3.75rem minmax(0, 1fr); gap: .625rem; }
    .mh-races-table .fi-ta-cell-location .mh-event-card { padding: .375rem 0; }
}



.mh-dashboard-grid { display: grid; gap: 1rem; align-items: start; }
.mh-dashboard-grid > * { min-width: 0; }
@media (min-width: 800px) {
    .mh-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mh-race-attempts { display: grid; gap: .5rem; margin-top: .75rem; }
.mh-race-attempts h4 { font-weight: 700; }
.mh-race-attempts > .fi-btn { justify-self: start; }
.mh-race-attempt { padding: .625rem; border-radius: .5rem; background: var(--mh-inset); }
.mh-race-attempt dl { display: flex; flex-wrap: wrap; gap: .375rem 1.25rem; margin-top: .25rem; }
.mh-race-attempt dd { font-variant-numeric: tabular-nums; }

.mh-attempt-form { display: grid; gap: .5rem; }
.mh-attempt-fields { display: flex; flex-wrap: wrap; gap: .5rem; }
.mh-attempt-fields label { display: grid; gap: .25rem; font-size: .8125rem; min-width: 0; }
.mh-attempt-fields input { width: 8rem; max-width: 100%; padding: .375rem .5rem; border: 1px solid var(--mh-border); border-radius: .5rem; background: var(--mh-panel); color: var(--mh-text); }
.mh-attempt-form > .fi-btn { justify-self: start; }
.mh-race-attempt-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }


.mh-discipline-layout { display: grid; gap: .875rem; min-width: 0; margin-top: .875rem; }
.mh-discipline-menu { display: flex; flex-wrap: wrap; align-content: start; gap: .375rem; min-width: 0; }
.mh-discipline-menu button {
    padding: .5rem .625rem;
    border-radius: .5rem;
    text-align: start;
    font-size: .8125rem;
    overflow-wrap: anywhere;
    background: var(--mh-inset);
}
.mh-discipline-menu button[aria-pressed=true] { background: var(--mh-active); color: var(--mh-accent-text); font-weight: 700; }
.mh-discipline-menu button:focus-visible { outline: 2px solid var(--mh-accent-text); outline-offset: 2px; }
.mh-discipline-panels, .mh-discipline-panel > * { min-width: 0; }
.mh-discipline-panel { display: grid; gap: .875rem; align-items: start; }
.mh-discipline-lineup { display: grid; gap: .5rem; }
.mh-discipline-lineup :is(h4,h5) { font-weight: 700; }
.mh-discipline-lineup .fi-btn { justify-self: start; }
.mh-discipline-panel .mh-race-attempts { padding: .75rem; margin: 0; border: 1px solid var(--mh-border); border-radius: .625rem; }
@media (min-width: 820px) {
    .mh-discipline-layout { grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr); }
    .mh-discipline-menu { display: grid; }
}
@media (min-width: 1100px) {
    .mh-discipline-panel { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}