/* Shared race navigation; all palettes come from tokens.css and the theme engine. */
body:has(.race-header) > .topbar { position: sticky; top: 0; z-index: 2000; }
.race-header {
    position: sticky; top: var(--race-topbar-h, 44px); z-index: 1880;
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 4px clamp(16px, 2vw, 30px);
    color: var(--ink); background: var(--bg-0); border-bottom: 1px solid var(--line);
}
.race-header[hidden] { display: none; }
.race-identity { min-width: 0; }
.race-name { display: block; font: 700 1rem/1.3 var(--display); overflow-wrap: anywhere; }
.race-meta { display: block; margin-top: 3px; font: 400 .82rem/1.5 var(--body); color: var(--muted); }
.race-meta:empty { display: none; }
.race-views {
    flex: 0 0 auto; display: flex; gap: 2px; padding: 2px;
    border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--bg-well);
}
.race-views a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 88px; padding: 8px 14px;
    border: 1px solid transparent; border-radius: var(--r-ctl);
    font: 700 .85rem/1.3 var(--body); color: var(--muted); text-decoration: none;
    touch-action: manipulation;
}
.race-views a:hover { background: var(--fill-hover); color: var(--ink); }
.race-views a[aria-current="page"] {
    background: var(--fill-selected); color: var(--ink); border-color: var(--edge-soft);
    box-shadow: inset 0 -2px 0 var(--accent);
}
.race-views a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 860px) {
    .race-header { top: var(--race-topbar-h, 73px); gap: 12px; padding: 4px 16px; }
    .race-identity { flex: 1; }
    /* Keep two readable title lines without growing a third navigation tier.
       The full name remains in the accessible text and the page body. */
    .race-name {
        font-size: .875rem; line-height: 1.25;
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .race-views { gap: 2px; padding: 0; border: 0; background: transparent; }
    .race-meta { display: none; }
    .race-views a { min-width: 64px; padding: 8px; font-size: .8125rem; }
}
@media print { .race-header { display: none; } }