:root {
    --pico-primary: #3D7EA6;
    --pico-primary-hover: #1B3A4B;
    --pico-background-color: #F5F0E8;
    --pico-card-background-color: #fff;
    --pico-card-border-color: #D4C5A9;
    --pico-color: #1B3A4B;
    --pico-h1-color: #1B3A4B;
    --pico-h2-color: #1B3A4B;
    --pico-h3-color: #1B3A4B;
    --pico-muted-color: #6b7b8d;
    --pico-table-border-color: #D4C5A9;
    --pico-secondary: #4A7C59;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #1B3A4B !important;
    text-decoration: none;
}

.brand-logo {
    width: 1.5rem;
    height: auto;
    border-radius: 50%;
}

/* The homepage's masthead: the logo beside the title and tagline, left-aligned. The h1's `margin-bottom: 0` restates Pico's hgroup rule on purpose: it locks the look when the CDN's @2 tag moves. */
.hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.hero h1 {
    font-size: 2.75rem;
    margin-bottom: 0;
}

.hero hgroup {
    margin-bottom: 0.5rem;
}

.hero-logo {
    flex: none;
    display: block;
    width: 8rem;
    height: auto;
    border-radius: 50%;
}

.hero-now {
    margin: 0;
    font-size: 0.9rem;
    color: var(--pico-muted-color);
}

@media (max-width: 575px) {
    .hero { gap: 0.9rem; }
    .hero-logo { width: 5rem; }
    .hero h1 { font-size: 2rem; }
}

/* The home page's lead (tiles and map) and its chart cards. */
.lead {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 768px) {
    .lead { grid-template-columns: 1fr 1fr; }
}

.lead h2 { margin-bottom: 0.25rem; }
.lead .tiles { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.lead-map .county-map { margin: 0; }

/* The election lead: headline numbers, then one tab per way of voting (static/tabs.js). */
.feltron {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    margin: 0.75rem 0 1.5rem;
}
.feltron div { display: flex; flex-direction: column-reverse; max-width: 16rem; }
.feltron dd {
    margin: 0;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.feltron dt {
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pico-muted-color);
    margin-top: 0.3rem;
}
@media (max-width: 575px) {
    .feltron dd { font-size: 2rem; }
}
.home-tabs > .lead + .lead { margin-top: 2rem; }
.home-tabs.tabbed > .lead + .lead { margin-top: 0; }
.home-tabs.tabbed .tab-heading { display: none; }
.tab-heading { font-size: 1.05rem; }
.tab-switch {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--pico-muted-border-color);
    margin: 0 0 1.25rem;
}
.tab-switch button {
    width: auto;
    margin: 0 0 -1px;
    padding: 0.45rem 1rem;
    font-size: 0.95rem;
    background: transparent;
    color: var(--pico-muted-color);
    border: 1px solid transparent;
    border-radius: 6px 6px 0 0;
}
/* plain colours: Pico redefines its background variable inside buttons (the site is light-only) */
.tab-switch button[aria-selected="true"] {
    color: #0b0b0b;
    font-weight: 600;
    border-color: var(--pico-muted-border-color);
    border-bottom-color: #ffffff;
    background: #ffffff;
}
.tab-switch button:focus-visible { outline: 2px solid var(--pico-primary); outline-offset: -2px; }

.home-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .home-cards { grid-template-columns: 1fr 1fr; }
}

.home-cards .viz-card { margin: 0; }
.home-cards .viz-card.wide { grid-column: 1 / -1; }
.home-cards .more { margin: 0.5rem 0 0; font-size: 0.9rem; }

.explore ul { list-style: none; padding: 0; columns: 2 20rem; }
.explore li { list-style: none; margin-bottom: 0.6rem; break-inside: avoid; }
.explore li a { font-weight: 600; margin-right: 0.35rem; }
.explore li span { font-size: 0.9rem; color: var(--pico-muted-color); }

footer {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid #D4C5A9;
}

details summary {
    cursor: pointer;
}

.secondary {
    color: var(--pico-muted-color);
    font-weight: normal;
}

.overflow-auto {
    overflow-x: auto;
}

/* Let the header links wrap on narrow screens instead of widening the page. */
header nav {
    flex-wrap: wrap;
}

header nav ul {
    flex-wrap: wrap;
}

/* Sortable table headings (see sortable.js). */
th.sortable {
    cursor: pointer;
    user-select: none;
}

th.sortable:hover,
th.sortable:focus-visible {
    text-decoration: underline;
}

th.sortable[aria-sort="ascending"]::after {
    content: " \25B2";
    font-size: 0.7em;
}

th.sortable[aria-sort="descending"]::after {
    content: " \25BC";
    font-size: 0.7em;
}

/* Visually hidden, still read by screen readers. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Second row of links under the page heading, for a section's pages. */
.subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0 0 1.25rem;
    padding: 0 0 0.5rem;
    border-bottom: 1px solid var(--pico-table-border-color);
    font-size: 0.95rem;
}

.subnav a {
    text-decoration: none;
}

.subnav a[aria-current="page"] {
    font-weight: 600;
    color: var(--pico-h3-color);
    border-bottom: 2px solid var(--pico-primary);
}

/* Where a page's numbers came from. */
.source-strip {
    background: #fff;
    border: 1px solid var(--pico-card-border-color);
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: var(--pico-muted-color);
}

.source-strip strong {
    color: var(--pico-color);
}

.source-strip .warn {
    display: block;
    margin-top: 0.35rem;
    color: #8a4b0f;
}

.delta-up { color: var(--pico-color); }
.delta-down { color: var(--pico-color); }
.delta-flat { color: var(--pico-muted-color); }

.callout {
    background: #f3f1ea;
    border-left: 4px solid #52514e;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin: 0 0 1rem;
    font-size: 0.95rem;
}

/* Headline figures as tiles: the turnout pages and the voter-file county pages share
   this markup (value, then its label; a tile may also carry a change or a sub-label). */
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.75rem;
    margin: 0 0 1.25rem;
}

.tile {
    background: var(--pico-card-background-color);
    border: 1px solid var(--pico-card-border-color);
    border-radius: 6px;
    padding: 0.75rem 0.9rem;
}

.tile .v {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.25;
}

.tile .v.small {
    font-size: 1rem;
    padding-top: 0.2rem;
}

.tile .l {
    font-size: 0.85rem;
    color: var(--pico-muted-color);
    margin-top: 0.25rem;
}

.num { text-align: right; font-variant-numeric: tabular-nums; }

.highlights { margin: 0 0 1rem; padding-left: 1.2rem; }
.highlights li { margin-bottom: 0.4rem; }

/* Results pages (templates/_results.html). */
.breadcrumb { font-size: 0.9rem; margin: 0 0 0.75rem; }
.results-table th[scope="row"] { font-weight: 600; min-width: 9rem; }
.results-table.compact th, .results-table.compact td { padding: 0.35rem 0.6rem; font-size: 0.9rem; }
.results-table tr.winner th[scope="row"] { color: var(--pico-h3-color); }
.results-table .mark { color: var(--pico-secondary); font-weight: 700; }
.results-table td.leader { font-weight: 600; }
.contest-card { padding: 1rem 1.25rem; margin: 0 0 1.25rem; }
.contest-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.contest-card table { margin-bottom: 0.25rem; }
.district-list { margin: 0 0 1rem; }
.toc { columns: 2 16rem; font-size: 0.9rem; }
.muted { color: var(--pico-muted-color); }
.tag { font-size: 0.7rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em;
       color: var(--pico-muted-color); border: 1px solid var(--pico-card-border-color);
       border-radius: 3px; padding: 0 0.3rem; vertical-align: middle; }
nav.breadcrumb { display: block; }