:root {
    --bg: #f8f6f2;
    --fg: #1c1c1c;
    --muted: #7a7268;
    --line: #d4cec6;
    --accent: #3c3830;
    --link: #3a5070;
    --c1-bg: #d8e4f0;
    --c1-fg: #1a3050;
    --c2-bg: #eeddd0;
    --c2-fg: #5a2e10;
    --c3-bg: #e4d8ee;
    --c3-fg: #3d1a5a;
    --c4-bg: #d0e8e0;
    --c4-fg: #0a3830;
    --c5-bg: #eedad8;
    --c5-fg: #5a1820;
    --c6-bg: #eee8c8;
    --c6-fg: #4a3800;
    --c7-bg: #d8ecc4;
    --c7-fg: #1e3a08;
    --yes-bg: #d8e8d0;
    --yes-fg: #1a4018;
    --no-bg: #eed8d8;
    --no-fg: #5a1818;
    --none-bg: #e8e4dc;
    --none-fg: #4a4840;
    --noend-bg: #edeae4;
    --noend-fg: #4a4840;
}
* {
    box-sizing: border-box;
}
html {
    overflow-x: clip;
}
body {
    font-family:
        "DM Sans",
        system-ui,
        -apple-system,
        sans-serif;
    background: var(--bg);
    color: var(--fg);
    margin: 0;
    padding: 0;
    line-height: 1.45;
}
header {
    background: var(--bg);
    color: var(--fg);
    padding: 22px 28px 18px;
    border-bottom: 1px solid #b0a898;
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
header h1 {
    margin: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--fg);
    text-align: center;
}
.header-links {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}
.header-links a {
    color: var(--muted);
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: color 0.15s;
}
.header-links a:hover {
    color: var(--fg);
}
.header-links svg {
    width: 22px;
    height: 22px;
    display: block;
    fill: currentColor;
}
nav.toc {
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 8px 28px;
    position: sticky;
    top: 0;
    z-index: 5;
    font-size: 12.5px;
    text-align: center;
    white-space: nowrap;
    overflow-x: auto;
}
nav.toc a {
    display: inline-block;
    margin: 2px 10px 2px 0;
    text-decoration: none;
    color: var(--accent);
}
nav.toc a:hover {
    text-decoration: underline;
}
main {
    max-width: 960px;
    margin: 0 auto;
    padding: 14px 28px 40px;
}
section {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 12px 18px;
    margin: 14px 0;
    scroll-margin-top: 90px;
}
caption {
    caption-side: top;
    text-align: left;
    font-size: 12px;
    color: var(--muted);
    padding: 0 0 4px;
    font-weight: 500;
}
h2 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    margin: 2px 0 10px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 6px;
    letter-spacing: -0.01em;
}
h3 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 17px;
    font-weight: 700;
    margin: 16px 0 4px;
    letter-spacing: -0.01em;
}
.swatch {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 11.5px;
    margin: 1px 3px;
    cursor: pointer;
    user-select: none;
    transition:
        transform 0.15s,
        box-shadow 0.15s;
}
.swatch:hover {
    transform: scale(1.08);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.swatch.locked {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}
table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12.5px;
    background: var(--bg);
    table-layout: fixed;
}
th,
td {
    border: 1px solid var(--line);
    padding: 5px 8px;
    vertical-align: top;
    word-wrap: break-word;
}
th {
    background: #edeae4;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    color: var(--fg);
}
tbody th[scope="row"],
tbody td:first-child {
    font-weight: 600;
    background: #f2f0ec;
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: 1px 0 0 var(--line);
}
thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #edeae4;
    box-shadow: 1px 0 0 var(--line);
}
tbody th[scope="row"] a,
tbody td:first-child a {
    color: var(--link);
    text-decoration: none;
}
tbody th[scope="row"] a:hover,
tbody td:first-child a:hover {
    text-decoration: underline;
}
td.cand {
    font-weight: 700;
    text-align: center;
}
td.c1 {
    background: var(--c1-bg);
    color: var(--c1-fg);
}
td.c2 {
    background: var(--c2-bg);
    color: var(--c2-fg);
}
td.c3 {
    background: var(--c3-bg);
    color: var(--c3-fg);
}
td.c4 {
    background: var(--c4-bg);
    color: var(--c4-fg);
}
td.c5 {
    background: var(--c5-bg);
    color: var(--c5-fg);
}
td.c6 {
    background: var(--c6-bg);
    color: var(--c6-fg);
}
td.c7 {
    background: var(--c7-bg);
    color: var(--c7-fg);
}
td.yes {
    background: var(--yes-bg);
    color: var(--yes-fg);
    font-weight: 700;
    text-align: center;
}
td.no {
    background: var(--no-bg);
    color: var(--no-fg);
    font-weight: 700;
    text-align: center;
}
td.none {
    background: var(--none-bg);
    color: var(--none-fg);
    font-weight: 700;
    text-align: center;
}
td.noend {
    background: var(--noend-bg);
    color: var(--noend-fg);
    font-style: italic;
    text-align: center;
    font-size: 11.5px;
}
.scroll {
    overflow-x: auto;
}
.race-cands {
    font-size: 12px;
    color: var(--fg);
    margin: 0 0 6px;
    padding: 5px 8px;
    background: #f2f0ec;
    border: 1px solid var(--line);
    border-radius: 3px;
}
abbr[title] {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    cursor: help;
}
.filter-bar {
    position: sticky;
    top: 36px;
    z-index: 4;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 8px 28px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}
.filter-bar label {
    color: var(--muted);
    font-weight: 500;
}
.filter-bar input {
    flex: 1;
    max-width: 360px;
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #fff;
    color: var(--fg);
}
.filter-bar input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: transparent;
}
.filter-bar .filter-count {
    color: var(--muted);
    font-size: 12px;
}
.filter-bar button {
    background: none;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
}
.filter-bar button:hover {
    background: #edeae4;
    color: var(--fg);
}
tr {
    transition: opacity 0.2s;
}
tr.row-dim {
    opacity: 0.35;
}
tr.filter-hidden {
    display: none;
}
section.filter-empty .scroll {
    opacity: 0.4;
}
section.filter-empty::after {
    content: "No orgs match the current filter in this race.";
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px;
    font-style: italic;
}

@media (max-width: 720px) {
    header {
        padding: 16px 16px 14px;
    }
    .header-inner {
        flex-direction: column;
        gap: 6px;
    }
    .header-links {
        position: static;
        align-self: center;
    }
    header h1 {
        font-size: 22px;
    }
    nav.toc {
        padding: 8px 16px;
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    nav.toc strong {
        position: sticky;
        left: 0;
        background: var(--bg);
        z-index: 10;
        padding: 4px 8px;
        box-shadow:
            -16px 0 0 var(--bg),
            4px 0 6px -4px rgba(0, 0, 0, 0.1);
    }
    .filter-bar {
        padding: 8px 16px;
        flex-wrap: wrap;
    }
    .filter-bar input {
        max-width: none;
    }
    main {
        padding: 10px 16px 30px;
    }
    section {
        padding: 10px 12px;
    }
    th,
    td {
        padding: 5px 6px;
        font-size: 12px;
    }
    tbody th[scope="row"],
    tbody td:first-child,
    thead th:first-child {
        max-width: 130px;
    }
    .race-cands {
        font-size: 11.5px;
        line-height: 1.6;
    }
}

@media print {
    nav.toc,
    .filter-bar {
        display: none;
    }
    header {
        background: #fff;
        color: #000;
        border-bottom: 1px solid #999;
    }
    header h1 {
        color: #000;
    }
    main {
        max-width: none;
        padding: 0 8px;
    }
    section {
        page-break-inside: avoid;
        border: 1px solid #ccc;
        box-shadow: none;
        margin: 8px 0;
        background: #fff;
    }
    .scroll {
        overflow: visible;
    }
    table {
        font-size: 10px;
        page-break-inside: avoid;
        background: #fff;
    }
    tbody th[scope="row"],
    tbody td:first-child,
    thead th:first-child {
        position: static;
        box-shadow: none;
    }
    a {
        color: #000;
        text-decoration: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
    }
}