/**
 * Vote with Pride design layer (plugin 1.8.2). Printed LAST of the plugin's stylesheets (VWP_Design::enqueue_layer),
 * reads public/css/vwp-tokens.css. One source for: page background, type scale, body text, buttons, chips, cards,
 * callouts, fields, focus and the footer, mapped onto the class names the templates already print.
 * 1.9.0: §0, the page frame (two content widths on the header's edge) and the page-title band.
 *
 * Why !important appears here: the theme prints three layers of !important type and colour rules before us
 * (theme options inline CSS: `.section.full-width-bg h2 {… !important}`, `… li {15px !important}`; css/vwp-custom-header.css:
 * `body #content p {18px; #374151 !important}`, `.gray-bg {gradient !important}`; style1.css `button`, `select`). A
 * normal declaration can never beat an !important one, so the properties those rules force carry !important here and
 * nothing else does. Selectors start at `#content` (1-1-0), which outranks every theme selector involved.
 */

/* =====================================================================================================
   0. Page frame and title band (1.9.0)
   One edge for everything: the header bar's container (--w-shell, --gutter). The theme's .wrapper-container (1170px;
   Yellow Pencil makes it 1600px on two pages; 16px padding on phones) becomes a plain full-width wrapper and #content
   is the frame, so the band's title and the content start at the logo's x. Two widths inside the frame: wide (the
   whole frame) and reading (--w-read), both left-aligned.
   ===================================================================================================== */
html body .container.wrapper-container { width: auto !important; max-width: none !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
html body .wrapper-container > #content {
    box-sizing: border-box; float: none; width: auto !important; max-width: var(--w-shell) !important;
    margin-left: auto !important; margin-right: auto !important; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important;
}
#content > .section { padding-left: 0 !important; padding-right: 0 !important; }
/* Signed-in visitors: WordPress pushes <html> down 32px (46px on phones) for the admin bar. The theme's Modernizr +
   style.css (`html.csscolumns { margin-top:0 }`) used to cancel that, and the header and its spacer already allow for
   the bar (vwp-nav.css); both theme files are dequeued in 1.9.0, so the cancel lives here. */
html:has(> body.admin-bar #vwp-nav) { margin-top: 0 !important; }
/* a full-width column sits on the frame's edge; a sidebar layout (posts: col-lg-9 + col-lg-3) keeps bootstrap's
   -15px row / 15px column gutters, which put its first column's text on the same edge */
#content > .section > .row:has(> .col-lg-12) { margin-left: 0 !important; margin-right: 0 !important; }
#content > .section > .row:not(:has(> .col-lg-12)) { margin-left: -15px !important; margin-right: -15px !important; }
/* the full-width column of page.php, 404.php and the plugin templates (a sidebar layout keeps the theme grid) */
#content > .section > .row > .col-lg-12 { float: none !important; width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
/* wide: lists, ballot, bills, profiles, results, officials, issues */
#content :is(.vwp-ballot, .vwp-candidate-profile, .vwp-iss, .vwp-off, .vwp-bills, .vwp-bill, .vwp-home) { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
/* reading: text pages, forms, Deadlines, How we rate, 404 */
#content :is(.vwp-method, .vwp-deadlines-page, .vwp-404, .vwp-issue-form, .vwp-form-container, .vwp-issues-page, .vwp-no-candidates, .magic-login-form-wrapper) {
    max-width: var(--w-read) !important; margin-left: 0 !important; margin-right: auto !important;
}
/* plain WordPress pages (no plugin block): the text runs in the reading column */
#content > .section > .row > .col-lg-12 > :is(p, ul, ol, h2, h3, h4, h5, blockquote, table, figure, hr, .wp-block-group, .wp-block-buttons) { max-width: var(--w-read); }
/* the footer's columns sit on the same edge */
#vwp-footer .vwp-footer-content { box-sizing: border-box; max-width: var(--w-shell) !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
#vwp-footer { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; left: auto !important; }

/* The band: right under the header, the page's one <h1>. Navy edge to edge: a box-shadow spread paints the sides (no
   100vw, so no sideways scroll and no scrollbar offset), clip-path keeps it to the band's height. The theme's own
   .page-heading gets the same look in case the swap did not happen (VWP_Design::band_end()), overriding the theme
   options' `.page-heading { display:none !important }` and the old fade-in. Line heights are whole pixels so the
   band's bottom edge lands on a pixel (a fractional edge left a lighter seam where box and shadow meet). */
#content > :is(.vwp-band, .section.page-heading) {
    display: block !important; position: relative; z-index: 0; margin: 0 0 34px !important; padding: 34px 0 32px !important;
    background: var(--band-bg) !important; box-shadow: 0 0 0 100vmax var(--band-bg) !important; clip-path: inset(0 -100vmax);
    color: var(--band-ink); text-align: left; opacity: 1 !important; animation: none !important; transform: none !important; border: 0 !important;
}
#content > .section.page-heading > .row { margin: 0 !important; }
#content > .section.page-heading > .row > [class*="col-"] { float: none !important; width: auto !important; padding: 0 !important; }
#content :is(.vwp-band__title, .page-heading h1) {
    margin: 0 !important; max-width: 30ch; color: var(--band-ink) !important; text-align: left;
    font-size: var(--fs-band) !important; line-height: var(--lh-band) !important; letter-spacing: -.015em !important; overflow-wrap: break-word; text-wrap: balance;
}
#content .vwp-band .vwp-band__eyebrow {
    margin: 0 0 10px !important; font-family: var(--font-body) !important; font-size: var(--fs-label) !important; font-weight: 700 !important;
    line-height: 17px !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--band-eyebrow) !important;
}
#content .vwp-band .vwp-band__sub { margin: 12px 0 0 !important; max-width: var(--w-read); font-size: 18px !important; line-height: 27px !important; color: var(--band-muted) !important; }
#content :is(.vwp-band, .page-heading) .vwp-band__crumbs, #content .page-heading .breadcrumb {
    display: block; margin: 0 0 16px !important; font-size: 14px !important; line-height: 21px !important; color: var(--band-muted) !important;
}
#content :is(.vwp-band, .page-heading) :is(.vwp-band__crumbs, .breadcrumb) a { color: var(--band-muted) !important; font-weight: 600; text-decoration: underline !important; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#content :is(.vwp-band, .page-heading) :is(.vwp-band__crumbs, .breadcrumb) a:hover { color: #fff !important; }
#content .vwp-band__dot { margin: 0 4px; }
#content :is(.vwp-band, .page-heading) :focus-visible { outline-color: var(--focus, #ffb703) !important; }
/* the content under the band starts at the same rhythm on every template */
#content > :is(.vwp-band, .section.page-heading) + .section { padding-top: 0 !important; margin-top: 0 !important; }
@media (max-width: 767px) {
    #content > :is(.vwp-band, .section.page-heading) { margin-bottom: 24px !important; padding: 24px 0 22px !important; }
    #content .vwp-band .vwp-band__sub { font-size: 16px !important; line-height: 24px !important; }
    #content :is(.vwp-band, .page-heading) .vwp-band__crumbs { margin-bottom: 12px !important; font-size: 13.5px !important; line-height: 20px !important; }
}

/* The theme's own views (single.php: races, posts …): the "Share this" row's Google+ item points nowhere since 2019
   (its link is not rewritten by VWP_Design::share_links_js()). */
.social-share > li.google { display: none !important; }
/* Theme views' post meta (dates, "by …", tags) were #95999e (2.6:1) and its links #4174c5 (4.3:1) on the page background. */
#content :is(.post-meta, .post-meta span, .post-side-meta .date span, .project-details td) { color: var(--ink-3-tint) !important; }
#content :is(.post-meta a, .post-meta span a, .blog-post .post-title a, .project-details td a, .link-quote > a) { color: var(--accent-ink) !important; }
/* Theme checkbox / radio skins (style1.css: input + label::before) drew the tick and dot with the theme icon font,
   which 1.9.0 drops on most pages (the comment form's cookie-consent box, for one): a font-free tick and dot instead. */
html body input[type="checkbox"]:checked + label::before {
    content: "" !important;
    background: #fafbfd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233730a3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat !important;
}
html body input[type="radio"]:checked + label::before { content: "" !important; background: #fafbfd radial-gradient(circle, #3730a3 0 4px, transparent 4.5px) !important; }

/* =====================================================================================================
   1. Page: one background, no "ghost slab" behind the content
   ===================================================================================================== */
html body, html body.boxed-layout { background-color: var(--bg) !important; }
#content .gray-bg, #content .section.full-width-bg { background: transparent !important; }

/* =====================================================================================================
   2. Type: Poppins headings on one scale, Open Sans text
   ===================================================================================================== */
#content h1, #content h2, #content h3, #content h4 {
    font-family: var(--font-head) !important; font-style: normal !important;
    letter-spacing: -.01em !important; color: var(--ink-1) !important; text-transform: none;
}
#content h1 { font-weight: 700 !important; font-size: var(--fs-h1) !important; line-height: var(--lh-h1) !important; }
#content h2 { font-weight: 700 !important; font-size: var(--fs-h2) !important; line-height: var(--lh-h2) !important; }
#content h3 { font-weight: 600 !important; font-size: var(--fs-h3) !important; line-height: var(--lh-h3) !important; }
#content h4 { font-weight: 600 !important; font-size: var(--fs-h4) !important; line-height: var(--lh-h4) !important; }

/* Headings that are labels, or that sit on colour. */
#content .vwp-iss__onrecord, #content .vwp-home__result-race {
    font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: .06em !important;
    text-transform: uppercase !important; color: var(--ink-2) !important;
}
#content .vwp-iss__side--affirming .vwp-iss__sidetitle { color: #1e3a8a !important; }
#content .vwp-iss__side--opposing .vwp-iss__sidetitle { color: #7f1d1d !important; }
#content .vwp-iss__cta h2, #content .vwp-iss__cta p { color: #fff !important; }
#content .vwp-iss__cta h2 { font-size: 21px !important; }
#content .vwp-home__alert h2, #content .vwp-home__alert h3, #content .vwp-home__alert p { color: #fff !important; }
/* Display text that is not a heading element but speaks in the heading voice. */
#content .vwp-home__alert-title, #content .vwp-bop__h, #content .vwp-home__tile-title, #content .vwp-ballot__name,
#content .vwp-off__name, #content .vwp-bill-row__num, #content .vwp-iss__name, #content .vwp-home__step-num, #content .vwp-step-number {
    font-family: var(--font-head) !important; letter-spacing: -.005em;
}
#content .vwp-bop__h { font-size: 16px !important; font-weight: 600 !important; color: var(--ink-1) !important; }
#content .vwp-bop__sub { font-family: var(--font-body); font-size: var(--fs-meta); font-weight: 400; letter-spacing: 0; color: var(--ink-3-tint); }
#content .vwp-ballot__name, #content .vwp-off__name, #content .vwp-home__tile-title { font-weight: 600; }
#content .vwp-bill-row__num { font-weight: 700; }
#content .vwp-iss__name { font-weight: 600 !important; }

/* Body text: one size, one line height, one colour. Selectors match the theme rules they replace. */
body #content p, body .wpb_text_column p, body .wpb_wrapper p, #content .wpb_text_column .wpb_wrapper p {
    font-size: var(--fs-body) !important; line-height: var(--lh-body) !important; color: var(--ink-2) !important;
}
/* One text colour for everything that inherits (the theme sets body #374151 and every li #3e474c). */
#content { color: var(--ink-2); }
#content li { color: var(--ink-2); }
#content :is(.vwp-res__row, .vwp-iss__items > li, .vwp-iss__questions > li) { color: var(--ink-1); }
/* Prose lists (no class on the list) read like paragraphs; the theme forced them to 15px. */
#content :is(ul, ol):not([class]) > li { font-size: var(--fs-body) !important; line-height: var(--lh-body) !important; color: var(--ink-2); }
#content :is(ul, ol):not([class]) > li > a { font-size: inherit !important; font-family: inherit !important; }

/* Links: one colour, always underlined (not colour alone). */
#content p a:not([class]), #content li a:not([class]), #content dd a:not([class]), #content td a:not([class]),
#content .vwp-record__source a, #content .vwp-iss__src, #content .vwp-iss__more a, #content .vwp-single-race a {
    color: var(--accent-ink) !important; text-decoration: underline !important; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
#content p a:not([class]):hover, #content li a:not([class]):hover, #content dd a:not([class]):hover { color: var(--ink-1) !important; text-decoration-thickness: 2px; }
/* …except on colour (election banner, Issues call-to-action) */
#content :is(.vwp-home__alert, .vwp-iss__cta) p a:not([class]), #content :is(.vwp-home__alert, .vwp-iss__cta) p a:not([class]):hover { color: #fff !important; }

/* Text roles inside components (the theme's `body #content p` made all of these 17px #374151). */
#content :is(.vwp-record__detail, .vwp-record__noend, .vwp-record__summary p, .vwp-ballot__legendnote, .vwp-bills__summary,
    .vwp-bill-row__status, .vwp-bill-row__by, .vwp-bills__note, .vwp-bill__note, .vwp-bill__caption, .vwp-glance__filed,
    .vwp-glance__src, .vwp-help-text, .vwp-measure > p, .magic-login-form-header .message, .vwp-iss__lede, .vwp-home__results-sub,
    .vwp-home__how-link, .vwp-home__legendnote, .vwp-home__card p) {
    font-size: var(--fs-small) !important; line-height: var(--lh-small) !important; color: var(--ink-2) !important;
}
#content :is(.vwp-ballot__racenote, .vwp-res__note, .vwp-bill-row__last, .vwp-bill__updated, .vwp-record__note, .vwp-record__source,
    .vwp-profile-credit, .vwp-off__office, .vwp-iss__race, .vwp-record__date, .vwp-glance__what) {
    font-size: var(--fs-meta) !important; line-height: var(--lh-meta) !important; color: var(--ink-3) !important;
}
#content .vwp-ballot__racenote { font-size: 14px !important; margin: 0 0 10px !important; }
#content .vwp-home__result-row { font-size: var(--fs-small) !important; line-height: 1.45 !important; color: var(--ink-1) !important; }
#content .vwp-home .vwp-home__result-rep { font-size: var(--fs-meta) !important; line-height: var(--lh-meta) !important; color: var(--ink-3) !important; }
/* Labels: results status lines ("FINAL, UNOFFICIAL · 254 OF 254 …"), kickers, chamber names. */
#content :is(.vwp-res__status, .vwp-bop__name, .vwp-iss__dlabel, .vwp-deadline-type, .vwp-home__eyebrow, .vwp-home__alert-kicker) {
    font-family: var(--font-body) !important; font-size: var(--fs-label) !important; line-height: 1.4 !important; font-weight: 700 !important;
    letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--ink-3) !important;
}
#content .vwp-bop__name { color: var(--ink-2) !important; }
/* meta on the page background or inside a tinted panel: the darker muted ink keeps 4.5:1 */
#content :is(.vwp-bill__updated, .vwp-iss__race, .vwp-iss__kind, .vwp-res__status, .vwp-res__note) { color: var(--ink-3-tint) !important; }
#content .vwp-home .vwp-home__eyebrow { color: var(--accent-ink) !important; }
#content .vwp-home .vwp-home__alert-kicker { color: rgba(255, 255, 255, .85) !important; }
#content .vwp-res__status { margin: 0 0 8px !important; }
#content .vwp-bop__nums { font-size: var(--fs-meta) !important; line-height: 1.4 !important; color: var(--ink-2) !important; }
#content .vwp-bill-row__title { font-size: 16px !important; line-height: 1.45 !important; color: var(--ink-1) !important; }
#content .vwp-bill-row__head, #content .vwp-bill__chips { line-height: 1.4 !important; }
#content .vwp-bill__sentence { font-family: var(--font-head) !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1.5 !important; color: var(--ink-1) !important; }
#content .vwp-glance__now { font-family: var(--font-head) !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1.45 !important; color: var(--accent-ink) !important; }
#content .vwp-record__elected { font-size: var(--fs-small) !important; color: var(--pro) !important; }

/* =====================================================================================================
   3. Buttons: three looks (primary, light, ghost-on-dark) × two sizes (md 44px, sm 34px); all pills, Poppins 600
   Every list below has the same specificity (1-1-0): compound members are written `.x :where(a)` so one entry can't
   lift a whole :is() list above the variant rules that follow it.
   ===================================================================================================== */
#content :is(.vwp-btn, .vwp-home__btn, .vwp-404__btn, .vwp-iss__btn, .vwp-bills__go, .vwp-404__search-row :where(button), .magic-login-submit,
    .vwp-ballot__chip, .vwp-iss__jump :where(a)) {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--ctl-md); height: auto; margin: 0; padding: 9px 20px !important;
    border: 1px solid transparent !important; border-radius: var(--r-pill) !important;
    font-family: var(--font-head) !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important;
    letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; text-align: center;
    box-shadow: none; cursor: pointer; vertical-align: middle; -webkit-appearance: none; appearance: none;
    transition: background-color .15s var(--ease), border-color .15s var(--ease), box-shadow .2s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
/* sm: filter and jump chips */
#content :is(.vwp-ballot__chip, .vwp-iss__jump :where(a)) { min-height: var(--ctl-sm); padding: 5px 14px !important; font-size: 14px !important; }
#content .vwp-btn-sm { min-height: var(--ctl-sm); padding: 5px 14px !important; font-size: 14px !important; }

/* primary: the header's gradient */
#content :is(.vwp-btn-primary, .vwp-btn-pride, .vwp-home__btn--primary, .vwp-404__btn--primary, .vwp-bills__go, .vwp-404__search-row :where(button), .magic-login-submit) {
    background: var(--grad) !important; color: #fff !important; box-shadow: var(--glow);
}
#content .vwp-ballot__chip[aria-pressed="true"] { background: var(--grad) !important; color: #fff !important; box-shadow: var(--glow); }
#content :is(.vwp-btn-primary, .vwp-btn-pride, .vwp-home__btn--primary, .vwp-404__btn--primary, .vwp-bills__go, .vwp-404__search-row :where(button), .magic-login-submit):hover,
#content .vwp-ballot__chip[aria-pressed="true"]:hover {
    background: var(--grad) !important; color: #fff !important; box-shadow: 0 10px 26px rgba(99, 102, 241, .45); filter: saturate(1.1) brightness(1.06);
}
/* light: white, accent ink, hairline accent border */
#content :is(.vwp-home__btn--light, .vwp-home__btn--outline, .vwp-404__btn, .vwp-btn-outline, .vwp-btn-glass, .vwp-iss__btn, .vwp-ballot__chip, .vwp-iss__jump :where(a)) {
    background: var(--surface) !important; color: var(--accent-ink) !important; border-color: var(--accent-100) !important;
}
#content :is(.vwp-home__btn--light, .vwp-home__btn--outline, .vwp-404__btn, .vwp-btn-outline, .vwp-btn-glass, .vwp-iss__btn, .vwp-ballot__chip, .vwp-iss__jump :where(a)):hover {
    background: var(--accent-50) !important; color: var(--accent-ink) !important; border-color: #c7cbff !important;
}
/* the 404's "See the full ballot" carries both classes: primary wins */
#content .vwp-404__btn.vwp-404__btn--primary { background: var(--grad) !important; color: #fff !important; border-color: transparent !important; }
/* ghost on dark (election banner, Issues call-to-action) */
#content :is(.vwp-home__btn--ghost, .vwp-iss__btn--ghost),
#content :is(.vwp-home__btn--ghost, .vwp-iss__btn--ghost):hover {
    background: rgba(255, 255, 255, .08) !important; color: #fff !important; border: 1.5px solid rgba(255, 255, 255, .5) !important;
}
#content :is(.vwp-home__btn--ghost, .vwp-iss__btn--ghost):hover { background: rgba(255, 255, 255, .16) !important; border-color: rgba(255, 255, 255, .8) !important; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    #content :is(.vwp-btn, .vwp-home__btn, .vwp-404__btn, .vwp-iss__btn, .vwp-bills__go, .magic-login-submit):hover { transform: translateY(-1px); }
}
#content :is(.vwp-btn, .vwp-home__btn, .vwp-404__btn, .vwp-iss__btn, .vwp-bills__go, .magic-login-submit):active { transform: none; }
#content .vwp-btn:disabled, #content .vwp-btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
/* Magic Login's submit is an <input>: inline-flex does not apply to it */
#content .magic-login-submit { display: inline-block !important; height: var(--ctl-md); padding: 0 22px !important; margin-top: 12px; }
/* Jump-chip counts sit inside the pill */
#content .vwp-iss__jumpn { background: var(--accent-50); color: var(--accent-ink); font-family: var(--font-body); }

/* =====================================================================================================
   4. Chips: status (uppercase, tinted) and tags (sentence case, quiet). 24px tall everywhere.
   ===================================================================================================== */
#content :is(.vwp-res__chip, .vwp-home__result-chip, .vwp-profile-result, .vwp-off__tag, .vwp-bop__call, .vwp-ballot__party, .vwp-ballot__inc,
    .vwp-profile-party, .vwp-record__badge, .vwp-chip, .vwp-deadline-badge) {
    display: inline-flex !important; align-items: center; height: 24px; margin: 0; padding: 0 9px !important; border: 0; border-radius: var(--r-pill) !important;
    font-family: var(--font-body) !important; font-size: 11.5px !important; font-weight: 700 !important; line-height: 1 !important;
    letter-spacing: .04em !important; text-transform: uppercase !important; white-space: nowrap; vertical-align: middle;
    background: #f1f5f9; color: var(--ink-2); animation: none;
}
#content :is(.vwp-res__chip, .vwp-home__result-chip, .vwp-bop__call) { margin-left: 6px; }
#content .vwp-profile-result__u { font-weight: 600; text-transform: none; letter-spacing: 0; margin-left: 3px; }
/* leading / incumbent / law: indigo */
#content :is(.vwp-res__chip, .vwp-home__result-chip, .vwp-profile-result, .vwp-ballot__inc, .vwp-profile-incumbent, .vwp-chip--law) { background: var(--accent-50); color: var(--accent-ink); }
/* won / in office / affirming / pro / happening now: green */
#content :is(.vwp-res__chip--won, .vwp-profile-result--won, .vwp-off__tag, .vwp-bop__call, .vwp-record__badge--affirming, .vwp-chip--pro, .vwp-badge-active) { background: var(--pro-bg); color: var(--pro); }
/* runoff / watching: amber */
#content :is(.vwp-res__chip--runoff, .vwp-profile-result--runoff, .vwp-chip--watching) { background: var(--watch-bg); color: #854d0e; box-shadow: inset 0 0 0 1px #fde68a; }
/* lost / anti: red */
#content :is(.vwp-res__chip--lost, .vwp-record__badge--anti, .vwp-chip--anti) { background: var(--anti-bg); color: var(--anti); box-shadow: inset 0 0 0 1px #fecaca; }
#content :is(.vwp-record__badge--neutral, .vwp-chip--state, .vwp-badge-passed) { background: #f1f5f9; color: var(--ink-2); }
/* party: the same chip on the ballot and on the profile */
#content :is(.vwp-ballot__party--d, .vwp-profile-party--d) { background: #dbeafe; color: #1e3a8a; }
#content :is(.vwp-ballot__party--r, .vwp-profile-party--r) { background: #fee2e2; color: #7f1d1d; }
#content :is(.vwp-ballot__party--g, .vwp-profile-party--g) { background: #d1fae5; color: #064e3b; }
#content :is(.vwp-ballot__party--l, .vwp-profile-party--l) { background: #fef3c7; color: #78350f; }
#content .vwp-deadline-badge { margin-top: 10px; }

/* tags: kind, place, who decides, source type, counts */
#content :is(.vwp-record__kind, .vwp-record__srctype, .vwp-iss__chip, .vwp-record__count) {
    display: inline-flex !important; align-items: center; height: 24px; margin: 0; padding: 0 10px !important; border-radius: var(--r-pill) !important;
    font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important;
    letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap; background: #f1f5f9; color: var(--ink-2);
}
#content :is(.vwp-iss__chip, .vwp-record__srctype--primary) { background: var(--accent-50); color: var(--accent-ink); }
/* a long "who decides" chip ("County judges and justices of the peace (who officiate)") wraps on a phone instead of
   running past the screen edge (1.9.0) */
#content .vwp-iss__chip { max-width: 100%; white-space: normal; height: auto; min-height: 24px; padding-top: 4px !important; padding-bottom: 4px !important; line-height: 1.25 !important; }
#content .vwp-record__srctype--advocacy { background: var(--watch-bg); color: #854d0e; }
#content .vwp-record__count--affirming { background: var(--pro-bg); color: var(--pro); }
#content .vwp-record__count--opposing { background: var(--anti-bg); color: var(--anti); }

/* =====================================================================================================
   5. Cards: one surface (white, hairline, 16px radius, soft shadow, 24px padding / 18px on phones)
   ===================================================================================================== */
#content :is(.vwp-glass-card, .vwp-ballot__race, .vwp-ballot__tools, .vwp-bop, .vwp-iss__issue, .vwp-bills__list, .vwp-bills__labels,
    .vwp-bills__how, .vwp-glance, .vwp-bill__sec, .vwp-home__results, .vwp-off__empty, .vwp-candidate-profile, .vwp-record__item,
    .vwp-off__link, .vwp-home__card, .vwp-home__how, .vwp-home__tile) {
    background-color: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-1) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
#content :is(.vwp-ballot__race, .vwp-bop, .vwp-iss__issue, .vwp-bills__list, .vwp-bills__labels, .vwp-bills__how, .vwp-glance, .vwp-bill__sec,
    .vwp-home__results, .vwp-off__empty, .vwp-candidate-profile, .vwp-form-container, .vwp-deadline-item) { padding: 24px !important; }
@media (max-width: 767px) {
    #content :is(.vwp-ballot__race, .vwp-bop, .vwp-iss__issue, .vwp-bills__list, .vwp-bills__labels, .vwp-bills__how, .vwp-glance, .vwp-bill__sec,
        .vwp-home__results, .vwp-off__empty, .vwp-candidate-profile, .vwp-form-container, .vwp-deadline-item) { padding: 18px !important; }
}
/* The ballot toolbar is a toolbar: no shadow fight with the race cards under it */
#content .vwp-ballot__tools { box-shadow: none !important; }
/* Hover on clickable cards */
@media (hover: hover) {
    #content .vwp-off__link:hover, #content .vwp-home__tile:hover { border-color: #c7cbff !important; box-shadow: var(--shadow-2) !important; }
}
/* Inset panels inside a card */
#content :is(.vwp-res, .vwp-home__result, .vwp-glance__date, .vwp-home__results .vwp-bop, .vwp-ballot__measures, .vwp-candidate-profile .vwp-record__summary) {
    background: var(--surface-2) !important; border: 1px solid var(--line) !important; border-radius: var(--r-md) !important; box-shadow: none !important;
}
#content .vwp-home__results .vwp-bop { padding: 14px 16px !important; }
#content .vwp-iss__side { border-radius: var(--r-md); }
/* Accent bar: a 4px inset bar on the left edge, clipped by the card's radius */
#content :is(.vwp-record__item, .vwp-bill-row, .vwp-deadline-item) { position: relative; overflow: hidden; }
#content :is(.vwp-record__item, .vwp-bill-row, .vwp-deadline-item)::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: auto;
    width: 4px; height: auto; border-radius: 0; opacity: 1; background: #94a3b8;
}

/* =====================================================================================================
   6. Callouts: one component, info (indigo) and warn (amber) tints
   ===================================================================================================== */
#content :is(.vwp-iss__noend, .vwp-bills__noend, .vwp-bill__status, .vwp-ballot__results-note, .vwp-archive-note) {
    position: relative; overflow: hidden; margin: 0 0 22px; padding: 14px 18px 14px 22px !important;
    border: 1px solid var(--accent-100) !important; border-radius: var(--r-md) !important; background: var(--info-bg) !important;
    font-size: var(--fs-small) !important; line-height: var(--lh-small) !important; color: var(--ink-2) !important;
}
#content :is(.vwp-iss__noend, .vwp-bills__noend, .vwp-bill__status, .vwp-ballot__results-note, .vwp-archive-note)::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent);
}
#content :is(.vwp-ballot__results-note, .vwp-archive-note) { background: var(--watch-bg) !important; border-color: #fde68a !important; color: #422006 !important; }
#content :is(.vwp-ballot__results-note, .vwp-archive-note)::before { background: var(--watch-bar); }
#content .vwp-archive-note p { margin: 0; font-size: inherit !important; line-height: inherit !important; color: inherit !important; }
#content :is(.vwp-ballot__results-note, .vwp-archive-note) a { color: #422006 !important; }
#content .vwp-bill__status p { margin: 0 !important; }

/* =====================================================================================================
   7. Fields: full width, 48px, 12px radius, Open Sans, one focus ring
   ===================================================================================================== */
#content :is(input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="password"], input[type="number"], select, textarea) {
    box-sizing: border-box; width: 100%; max-width: 100%; min-height: var(--field-h); margin: 0;
    padding: 0 14px !important; border: 1px solid var(--line-strong) !important; border-radius: var(--r-md) !important;
    background-color: var(--surface) !important; color: var(--ink-1) !important; box-shadow: none !important;
    font-family: var(--font-body) !important; font-size: 16px !important; line-height: 1.4 !important; font-weight: 400;
}
#content textarea { min-height: 120px; padding: 12px 14px !important; line-height: 1.5 !important; resize: vertical; }
#content select {
    -webkit-appearance: none; appearance: none; padding-right: 42px !important; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 18px !important;
}
#content :is(input, select, textarea)::placeholder { color: var(--ink-3) !important; opacity: 1; }
#content :is(input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="password"], input[type="number"], select, textarea):hover { border-color: #94a3b8 !important; }
#content :is(input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="password"], input[type="number"], select, textarea):focus {
    outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent), 0 0 0 5px rgba(79, 70, 229, .25) !important;
}
/* search bars stay pills, at control height */
#content :is(.vwp-ballot__search, .vwp-404__search-row input) { min-height: var(--ctl-md); border-radius: var(--r-pill) !important; padding: 0 18px !important; }
/* the bill filter bar: controls line up at 44px */
#content .vwp-bills__field :is(select, input) { min-height: var(--ctl-md); }
#content .vwp-bills__field select { width: auto; min-width: 150px; }
#content .vwp-bills__field > span { font-size: var(--fs-meta); font-weight: 700; color: var(--ink-2); }
/* two-up rows where the markup pairs fields; one field fills the row */
#content .vwp-form-row { display: flex; gap: 16px; }
#content .vwp-form-row > .vwp-form-group { flex: 1 1 0; min-width: 0; }
@media (max-width: 640px) { #content .vwp-form-row { flex-direction: column; gap: 0; } }
#content .vwp-form-group label, #content #magicloginform label { font-family: var(--font-body) !important; font-size: 15px !important; font-weight: 600 !important; color: var(--ink-1) !important; }
#content :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent); }
#content .vwp-form-header { text-align: left; }
#content .vwp-form-header p { margin-left: 0 !important; margin-right: 0 !important; }

/* =====================================================================================================
   8. Focus: deep indigo on light surfaces (9.6:1; amber is only 1.7:1 on white); the header's amber on dark ones
   ===================================================================================================== */
#content :focus-visible { outline: 3px solid var(--accent-ink, #3730a3) !important; outline-offset: 2px !important; }
#content :is(.vwp-home__alert, .vwp-iss__cta, .vwp-callout--dark) :focus-visible { outline-color: var(--focus, #ffb703) !important; }
#content a:not([class]):focus-visible { border-radius: 6px; }

/* =====================================================================================================
   9. Component details
   ===================================================================================================== */
/* Issues call-to-action: the header gradient, white type */
#content .vwp-iss__cta { background: var(--grad) !important; border-radius: var(--r-lg) !important; box-shadow: var(--shadow-2); }
#content .vwp-iss__cta p { font-size: var(--fs-small) !important; }
#content .vwp-iss__ctabtns { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 !important; }
/* Deadlines: icon tiles like the home page's quick links */
#content .vwp-deadline-item { border-left: 1px solid var(--line) !important; gap: 18px !important; }
#content .vwp-deadline-item::before { background: var(--deadline-color, var(--accent)); }
#content .vwp-deadline-icon {
    display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: var(--r-md);
    background: var(--deadline-color, var(--accent)); color: #fff; font-size: 24px;
}
#content .vwp-deadline-icon svg { width: 24px; height: 24px; display: block; }
#content .vwp-deadline-passed { background: var(--surface) !important; }
#content .vwp-deadline-passed::before { background: #94a3b8; }
#content .vwp-deadline-passed .vwp-deadline-icon { background: #64748b; }
#content .vwp-deadline-type { color: var(--accent-ink) !important; }
@media (max-width: 480px) { #content .vwp-deadline-icon { width: 42px; height: 42px; } }
#content .vwp-deadlines-header { text-align: left; }
/* Record items and bill rows: bar colours */
#content .vwp-record__item--affirming::before, #content .vwp-record__item--stance-affirming::before, #content .vwp-bill-row--pro::before { background: var(--pro-bar); }
#content .vwp-record__item--anti::before, #content .vwp-record__item--stance-anti::before, #content .vwp-bill-row--anti::before { background: var(--anti-bar); }
#content .vwp-bill-row--watching::before { background: var(--watch-bar); }
#content .vwp-record__item { padding: 16px 18px 14px 22px !important; }
/* Bill rows: separate inset rows inside the list card */
#content .vwp-bills__rows { display: grid; gap: 10px; }
#content .vwp-bill-row { margin: 0 !important; padding: 14px 16px 14px 20px !important; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
#content .vwp-bill-row > :last-child { margin-bottom: 0 !important; }
#content .vwp-bill-row__title a:not([class]) { color: var(--ink-1) !important; text-decoration: none !important; }
#content .vwp-bill-row__title a:not([class]):hover { color: var(--accent-ink) !important; text-decoration: underline !important; }
/* Results bars use the accent */
#content :is(.vwp-res__row--leading, .vwp-res__row--won) .vwp-res__bar > span, #content .vwp-progress span { background: var(--accent); }
/* Profile header: incumbent chip next to the party chip */
#content .vwp-candidate-profile .vwp-profile-meta { gap: 8px; }

/* =====================================================================================================
   10. Footer: the header's lockup, a full-bleed pride stripe on top, left-aligned columns on phones
   ===================================================================================================== */
#vwp-footer { position: relative; margin-top: 64px; }
#vwp-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--pride-flat); }
#vwp-footer .vwp-footer-pride-stripe { display: none; }
#vwp-footer .vwp-footer-title {
    display: flex; align-items: center; gap: 12px; margin: 0 0 10px !important;
    font-family: var(--font-head) !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.2 !important;
    letter-spacing: -.01em !important; color: #fff !important;
}
#vwp-footer .vwp-footer-title::before { content: ""; flex: none; width: 44px; height: 44px; background: url(../../assets/img/icons/mark-96.png) center / contain no-repeat; }
#vwp-footer .vwp-footer-tagline { font-size: 15px !important; line-height: 1.5 !important; color: #a5b4c8 !important; margin: 0 0 18px !important; }
#vwp-footer .vwp-footer-links h4, #vwp-footer .vwp-footer-partners h4 {
    font-family: var(--font-head) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .06em !important; color: #fff !important;
}
#vwp-footer .vwp-footer-bottom { text-align: left; }
#vwp-footer .vwp-footer-copyright p { font-size: var(--fs-meta) !important; line-height: var(--lh-meta) !important; color: #a5b4c8 !important; margin: 0 0 4px !important; }
#vwp-footer .vwp-footer-copyright p.vwp-footer-disclaimer { font-size: var(--fs-meta) !important; color: #94a3b8 !important; }
#vwp-footer .vwp-footer-bottom { padding-bottom: 28px; }
@media (max-width: 900px) {
    #vwp-footer .vwp-footer-main, #vwp-footer .vwp-footer-brand { text-align: left !important; align-items: flex-start !important; }
    #vwp-footer .vwp-footer-project-by { align-items: flex-start !important; }
}
@media (max-width: 600px) {
    #vwp-footer .vwp-footer-main { text-align: left !important; }
    #vwp-footer .vwp-footer-links > ul > li > a, #vwp-footer .vwp-footer-partners > ul > li > a { padding-left: 0 !important; }
}

/* =====================================================================================================
   11. Reduced motion
   ===================================================================================================== */
@media (prefers-reduced-motion: reduce) {
    #content :is(.vwp-btn, .vwp-home__btn, .vwp-404__btn, .vwp-iss__btn, .vwp-bills__go, .magic-login-submit, .vwp-ballot__chip, .vwp-iss__jump :where(a), .vwp-off__link, .vwp-home__tile) {
        transition: none !important; transform: none !important;
    }
}