/* =========================================================
   Election Results Component — electionresults.css
   Themes: default | dark | minimal | bold
   All colours driven by CSS custom properties so they can
   be overridden by the component params at runtime.
   ========================================================= */

/* ---- Base variables (fallback; overridden by inline style from view) ---- */
:root {
    /* Colours — overridden at runtime by component params */
    --er-primary:           #1a56db;
    --er-secondary:         #e02424;
    --er-accent:            #057a55;
    --er-winner-row-bg:     #065f46;
    --er-winner-row-text:   #ffffff;
    --er-leading-row-bg:    #92400e;
    --er-leading-row-text:  #ffffff;

    /* Surface colours — inherit from the site template where possible */
    --er-bg:            transparent;
    --er-surface:       rgba(0,0,0,.03);
    --er-border:        rgba(0,0,0,.12);
    --er-text:          inherit;
    --er-text-muted:    rgba(0,0,0,.55);
    --er-winner-bg:     #ecfdf5;
    --er-winner-border: #059669;

    /* Sizing */
    --er-radius:    .625em;
    --er-radius-sm: .375em;
    --er-shadow:    0 1px 4px rgba(0,0,0,.07);
    --er-shadow-md: 0 4px 16px rgba(0,0,0,.10);

    /* Typography — inherit everything from the site template */
    --er-font:          inherit;
    --er-line-height:   1.6;
}

/* =========================================================
   TEMPLATE INHERITANCE — reads from the host template
   All sizing is relative so it scales with the template's
   base font size. Backgrounds are transparent by default so
   the template's page colour shows through.
   ========================================================= */

.er-wrap {
    /* Ensure we pick up the template's link colour for the
       primary variable if no explicit colour has been set */
    --er-primary: var(--link-color, #1a56db);
}

/* Let headings inside the component inherit the template's
   heading font and weight rather than forcing our own */
.er-wrap h1, .er-wrap h2, .er-wrap h3,
.er-wrap h4, .er-wrap h5, .er-wrap h6 {
    font-family: inherit;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
}

/* Cards and panels — transparent bg so template colour shows */
.er-card, .er-office, .er-candidate,
.er-election-card, .er-wrap .well {
    background: var(--er-bg, transparent);
}

/* Ensure form elements within the component inherit template styles */
.er-wrap input,
.er-wrap select,
.er-wrap textarea {
    font-family: inherit;
    font-size: inherit;
}


/* ---- Reset & base ---- */
.er-wrap {
    font-family: var(--er-font, inherit);
    /* font-size: inherit — matches the surrounding template text exactly.
       Scaling is applied via inline style when the user sets font_size in Options. */
    line-height: 1.5;
    color:       var(--er-text, inherit);
    background:  var(--er-bg, transparent);
}
.er-wrap *, .er-wrap *::before, .er-wrap *::after { box-sizing: border-box; }
.er-wrap a { color: var(--er-primary, inherit); text-decoration: none; }
.er-wrap a:hover { text-decoration: underline; }

/* ---- Utility ---- */
.er-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.text-right { text-align: right; }

/* ---- Page titles ---- */
.er-page-title {
    font-size: 1.6em;
    font-weight: 700;
    margin: 0 0 1.25em;
    color: var(--er-text);
}
.er-back-link {
    display: inline-block;
    font-size: .875em;
    color: var(--er-text-muted);
    margin-bottom: .5em;
}
.er-back-link:hover { color: var(--er-primary); }

/* ---- Election cards (listing) ---- */
.er-election-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25em;
    margin-top: 1em;
}
.er-election-card {
    display: flex;
    flex-direction: column;
    gap: .5em;
    padding: 1.25em 1.5em;
    background: var(--er-surface);
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius);
    box-shadow: var(--er-shadow);
    transition: box-shadow .15s, transform .15s;
    text-decoration: none;
    color: var(--er-text);
}
.er-election-card:hover {
    box-shadow: var(--er-shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
}
.er-election-card__header { display: flex; align-items: center; gap: .5em; flex-wrap: wrap; }
.er-election-card__title { font-size: 1.1em; font-weight: 700; margin: 0; flex: 1; }
.er-election-card__date { font-size: .85em; color: var(--er-text-muted); }
.er-election-card__desc { font-size: .9em; color: var(--er-text-muted); margin: 0; }
.er-election-card__cta { font-size: .875em; font-weight: 600; color: var(--er-primary); margin-top: auto; padding-top: .5em; }

/* ---- Badges ---- */
.er-badge {
    display: inline-block;
    padding: .2em .65em;
    font-size: .75em;
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
}
.er-badge--active   { background: #d1fae5; color: #065f46; }
.er-badge--draft    { background: #f3f4f6; color: #374151; }
.er-badge--closed   { background: #fee2e2; color: #991b1b; }
.er-badge--winner   { background: var(--er-accent); color: #ffffff; font-size: var(--er-winner-badge-size, 85%); }

/* ---- Buttons ---- */
.er-btn {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .55em 1.2em;
    font-size: .9em;
    font-weight: 600;
    border-radius: var(--er-radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    text-decoration: none;
}
.er-btn--primary {
    background: var(--er-primary);
    color: #ffffff;
    border-color: var(--er-primary);
}
.er-btn--primary:hover {
    filter: brightness(1.1);
    color: #ffffff;
    text-decoration: none;
}
.er-btn--secondary {
    background: transparent;
    color: var(--er-primary);
    border-color: var(--er-primary);
}
.er-btn--secondary:hover {
    background: var(--er-primary);
    color: #ffffff;
    text-decoration: none;
}
.er-btn--large { padding: .75em 1.75em; font-size: 1em; }

/* ---- Results header ---- */
.er-results__header {
    display: block;
    text-align: center;
    margin-bottom: 2em;
    padding-bottom: 1em;
    border-bottom: 2px solid var(--er-border);
}
.er-results__title-row {
    text-align: center;
    padding: .5em 0 .75em;
}
.er-results__title {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 .3em;
    color: var(--er-text);
}
.er-results__date {
    display: block !important;
    width: 100% !important;
    font-size: .95em;
    color: var(--er-text-muted);
    text-align: center;
    margin: .2em 0 .5em;
}

/* ---- Office block ---- */
.er-office {
    background: var(--er-surface);
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius);
    padding: 1.5em;
    margin-bottom: 1.75em;
    box-shadow: var(--er-shadow);
}
.er-office__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5em;
    margin-bottom: 1em;
}
.er-office__title {
    font-size: var(--er-office-title-size, 1.25em);
    font-weight: 700;
    margin: 0;
    color: var(--er-office-title-color, var(--er-primary));
}
.er-office__total { font-size: .85em; color: var(--er-text-muted); }
.er-office__desc { font-size: .9em; color: var(--er-text-muted); margin: 0 0 1em; }

/* ---- Candidate result row ---- */
.er-candidates { display: flex; flex-direction: column; gap: .85em; }
.er-candidate {
    display: flex;
    align-items: flex-start;
    gap: 1em;
    padding: .85em 1em;
    background: var(--er-bg);
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius-sm);
    flex-wrap: wrap;
}
.er-candidate--winner {
    border-color: var(--er-winner-border);
    background: var(--er-winner-row-bg);
}
.er-candidate--winner .er-candidate__name,
.er-candidate--winner .er-candidate__votes,
.er-candidate--winner .er-candidate__pct {
    color: var(--er-winner-row-text);
}
.er-candidate--winner .er-candidate__party {
    color: rgba(255,255,255,.75);
}
.er-candidate__identity { display: flex; align-items: center; gap: .75em; flex: 1; min-width: 180px; }
.er-candidate__photo {
    width: 48px; height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.er-candidate__avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2em; font-weight: 700; color: #fff;
    flex-shrink: 0;
}
.er-candidate__info { display: flex; flex-direction: column; gap: .2em; }
.er-candidate__name-row { display: flex; align-items: center; gap: .5em; flex-wrap: wrap; }
.er-candidate__name { font-size: 1em; font-weight: 700; color: var(--er-text); }
.er-candidate__party {
    font-size: .8em;
    color: var(--er-text-muted);
    padding-left: .4em;
}
.er-candidate__results { display: flex; flex-direction: column; gap: .35em; flex: 2; min-width: 160px; }
.er-progress-bar {
    height: 10px;
    background: var(--er-border);
    border-radius: 999px;
    overflow: hidden;
}
.er-progress-bar__fill {
    height: 100%;
    border-radius: 999px;
    transition: width .6s ease;
    min-width: 2px;
}
.er-candidate__vote-info { display: flex; align-items: baseline; gap: .75em; }
.er-candidate__votes { font-size: 1em; font-weight: 700; color: var(--er-text); }
.er-candidate__pct {
    font-size: .9em;
    font-weight: 600;
    color: var(--er-text-muted);
}

/* ---- Recent submissions table ---- */
.er-recent-submissions { margin-top: 2.5em; }
.er-recent-submissions__title {
    font-size: 1em;
    font-weight: 700;
    color: var(--er-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .75em;
}
.er-submissions-table-wrap { overflow-x: auto; }
.er-submissions-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875em;
}
.er-submissions-table th,
.er-submissions-table td {
    padding: .5em .75em;
    border-bottom: 1px solid var(--er-border);
    text-align: left;
}
.er-submissions-table th { font-weight: 600; color: var(--er-text-muted); font-size: .8em; text-transform: uppercase; letter-spacing: .04em; }
.er-submissions-table tbody tr:hover { background: var(--er-surface); }

/* ---- Vote entry form ---- */
.er-vote-entry__header { margin-bottom: 2em; padding-bottom: 1em; border-bottom: 2px solid var(--er-border); }
.er-vote-entry__subtitle { color: var(--er-text-muted); margin: .25em 0 0; }
.er-vote-form__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    margin-bottom: 2em;
    padding: 1.25em;
    background: var(--er-surface);
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius);
}
@media (max-width: 600px) { .er-vote-form__meta { grid-template-columns: 1fr; } }
.er-form-group { display: flex; flex-direction: column; gap: .35em; }
.er-form-label { font-size: .875em; font-weight: 600; color: var(--er-text); }
.er-form-hint { font-size: .8em; font-weight: 400; color: var(--er-text-muted); margin-left: .4em; }
.er-form-control {
    padding: .5em .75em;
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius-sm);
    font-size: .9em;
    background: var(--er-bg);
    color: var(--er-text);
    transition: border-color .15s;
}
.er-form-control:focus { border-color: var(--er-primary); outline: none; box-shadow: 0 0 0 3px rgba(26,86,219,.15); }
textarea.er-form-control { resize: vertical; }

.er-vote-office {
    background: var(--er-surface);
    border: 1px solid var(--er-border);
    border-left: 4px solid var(--er-primary);
    border-radius: var(--er-radius);
    padding: 1.5em;
    margin-bottom: 1.5em;
}
.er-vote-office__title { font-size: 1.2em; font-weight: 700; color: var(--er-primary); margin: 0 0 .5em; }
.er-vote-office__desc { font-size: .9em; color: var(--er-text-muted); margin: 0 0 1em; }

.er-vote-candidates { display: flex; flex-direction: column; gap: .75em; }
.er-vote-candidate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding: .75em 1em;
    background: var(--er-bg);
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius-sm);
    flex-wrap: wrap;
}
.er-vote-candidate__identity { display: flex; align-items: center; gap: .75em; flex: 1; min-width: 180px; }
.er-vote-candidate__info { display: flex; flex-direction: column; gap: .15em; }
.er-vote-candidate__name { font-size: .95em; font-weight: 700; }
.er-vote-candidate__party { font-size: .8em; color: var(--er-text-muted); padding-left: .4em; }
.er-vote-candidate__input-wrap { display: flex; align-items: center; gap: .5em; }
.er-vote-input {
    width: 90px;
    padding: .45em .6em;
    border: 2px solid var(--er-border);
    border-radius: var(--er-radius-sm);
    font-size: 1.1em;
    font-weight: 700;
    text-align: right;
    color: var(--er-text);
    background: var(--er-bg);
    transition: border-color .15s;
}
.er-vote-input:focus { border-color: var(--er-primary); outline: none; }
.er-vote-input__label { font-size: .8em; color: var(--er-text-muted); }

.er-office-total {
    margin-top: .75em;
    font-size: .875em;
    color: var(--er-text-muted);
    text-align: right;
}
.er-office-total__value { color: var(--er-text); font-size: 1em; }

.er-vote-form__actions {
    display: flex;
    gap: 1em;
    margin-top: 2em;
    padding-top: 1.5em;
    border-top: 2px solid var(--er-border);
    flex-wrap: wrap;
}

/* ---- Empty states ---- */
.er-empty { padding: 2.5em; text-align: center; color: var(--er-text-muted); background: var(--er-surface); border-radius: var(--er-radius); border: 1px dashed var(--er-border); }
.er-empty-office { font-size: .9em; color: var(--er-text-muted); font-style: italic; }

/* =========================================================
   THEME: dark
   ========================================================= */
.er-theme-dark {
    --er-bg:            #1f2937;
    --er-surface:       #111827;
    --er-border:        #374151;
    --er-text:          #f9fafb;
    --er-text-muted:    #9ca3af;
    --er-winner-bg:     #064e3b;
    --er-winner-border: #10b981;
    --er-shadow:        0 1px 4px rgba(0,0,0,.4);
    --er-shadow-md:     0 4px 16px rgba(0,0,0,.5);
    color: #f9fafb;
    background: #111827;
}

/* =========================================================
   THEME: minimal
   ========================================================= */
.er-theme-minimal {
    --er-bg:      #ffffff;
    --er-surface: #ffffff;
    --er-border:  #e5e7eb;
    --er-shadow:  none;
    --er-shadow-md: none;
    --er-radius:  4px;
    --er-radius-sm: 2px;
}
.er-theme-minimal .er-office { border: none; border-top: 3px solid var(--er-primary); border-radius: 0; padding: 1.25em 0; }
.er-theme-minimal .er-candidate { border: none; border-bottom: 1px solid var(--er-border); border-radius: 0; }
.er-theme-minimal .er-election-card { box-shadow: none; border: 1px solid var(--er-border); }

/* =========================================================
   THEME: bold
   ========================================================= */
.er-theme-bold {
    --er-bg:      #f0f4ff;
    --er-surface: #ffffff;
    --er-border:  #c7d2fe;
    --er-radius:  16px;
    --er-radius-sm: 10px;
    --er-shadow:  0 2px 8px rgba(99,102,241,.12);
    --er-shadow-md: 0 8px 24px rgba(99,102,241,.18);
}
.er-theme-bold .er-office { border-left-width: 6px; }
.er-theme-bold .er-candidate--winner { border-width: 2px; }
.er-theme-bold .er-page-title { font-size: 2em; }
.er-theme-bold .er-results__title { font-size: 2.25em; }
.er-theme-bold .er-progress-bar { height: 14px; }

/* responsive moved to MOBILE RESPONSIVE block below */

/* =========================================================
   PRECINCT SELECTOR
   ========================================================= */
.er-precinct-selector {
    background: var(--er-surface);
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius);
    padding: 1.25em 1.5em;
    margin-bottom: 1.5em;
}
.er-precinct-selector__header {
    display: flex;
    align-items: baseline;
    gap: .75em;
    flex-wrap: wrap;
    margin-bottom: 1em;
}
.er-precinct-selector__label {
    font-size: 1em;
    font-weight: 700;
    color: var(--er-text);
}
.er-precinct-selector__hint {
    font-size: .85em;
    color: var(--er-text-muted);
}
.er-required-star {
    color: var(--er-secondary);
    margin-left: .15em;
}

/* Tile grid */
.er-precinct-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: .65em;
}

/* Each precinct is a radio wrapped in a label */
.er-precinct-tile {
    cursor: pointer;
    display: block;
}
.er-precinct-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.er-precinct-tile__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2em;
    padding: .75em .5em;
    border: 2px solid var(--er-border);
    border-radius: var(--er-radius-sm);
    background: var(--er-bg);
    text-align: center;
    transition: border-color .15s, background .15s, transform .1s;
    min-height: 64px;
}
.er-precinct-tile:hover .er-precinct-tile__inner {
    border-color: var(--er-primary);
    background: var(--er-surface);
}
.er-precinct-radio:checked + .er-precinct-tile__inner {
    border-color: var(--er-primary);
    background: var(--er-primary);
}
.er-precinct-tile__name {
    font-size: .875em;
    font-weight: 700;
    color: var(--er-text);
    line-height: 1.2;
}
.er-precinct-radio:checked + .er-precinct-tile__inner .er-precinct-tile__name {
    color: #ffffff;
}
.er-precinct-tile__desc {
    font-size: .75em;
    color: var(--er-text-muted);
    line-height: 1.3;
}
.er-precinct-radio:checked + .er-precinct-tile__inner .er-precinct-tile__desc {
    color: rgba(255,255,255,.8);
}

/* Dark theme adjustments */
.er-theme-dark .er-precinct-radio:checked + .er-precinct-tile__inner {
    border-color: var(--er-primary);
    background: var(--er-primary);
}

/* Bold theme */
.er-theme-bold .er-precinct-grid {
    gap: .85em;
}
.er-theme-bold .er-precinct-tile__inner {
    border-radius: 12px;
    min-height: 72px;
}

/* Responsive */
@media (max-width: 480px) {
    .er-precinct-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}

/* =========================================================
   LEADING / WINNER / CERTIFIED — v1.2.0
   ========================================================= */

/* "Currently leading" candidate row highlight */
.er-candidate--leading {
    border-color: var(--er-leading-row-bg);
    background: var(--er-leading-row-bg);
}
.er-candidate--leading .er-candidate__name,
.er-candidate--leading .er-candidate__votes,
.er-candidate--leading .er-candidate__pct {
    color: var(--er-leading-row-text);
}
.er-candidate--leading .er-candidate__party {
    color: rgba(255,255,255,.75);
}

/* Meta row under the election title */
.er-results__meta-row {
    display: flex;
    align-items: center;
    gap: .75em;
    flex-wrap: wrap;
    margin-top: .25em;
}
.er-results__meta-row--centered {
    justify-content: center;
    width: 100%;
}
.er-results__badge-row {
    display: block !important;
    width: 100% !important;
    text-align: center;
    margin-top: .25em;
}


/* "Currently leading" badge — amber */
.er-badge--leading {
    background: #fef3c7;
    color: #92400e;
    display: inline-flex;
    align-items: center;
    gap: .3em;
}

/* Pulsing dot inside the "Currently leading" badge */
.er-pulse-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d97706;
    animation: er-pulse 1.4s ease-in-out infinite;
}

@keyframes er-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .4; transform: scale(.75); }
}

/* "Certified on …" badge — green */
.er-certified-badge {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    background: #d1fae5;
    color: #065f46;
    font-size: .8em;
    font-weight: 500;
    padding: .25em .75em;
    border-radius: 999px;
}

/* "Counting in progress" badge — amber, pulsing border */
.er-counting-badge {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    background: #fffbeb;
    color: #92400e;
    font-size: .8em;
    font-weight: 500;
    padding: .25em .75em;
    border-radius: 999px;
    border: 1px solid #fde68a;
}

/* Live dot inside "Counting in progress" */
.er-counting-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d97706;
    animation: er-pulse 1.2s ease-in-out infinite;
}

/* Dark theme overrides */
/* dark theme: leading/winner rows use the same CSS vars, already configurable */
.er-theme-dark .er-badge--leading {
    background: #422006;
    color: #fcd34d;
}
.er-theme-dark .er-certified-badge {
    background: #064e3b;
    color: #6ee7b7;
}
.er-theme-dark .er-counting-badge {
    background: #1c1600;
    color: #fcd34d;
    border-color: #78350f;
}

/* Admin election list — certified_date column hint */
.er-certified-hint {
    font-size: .75em;
    color: #065f46;
    font-weight: 500;
}

/* =========================================================
   PRECINCT BREAKDOWN TABLE — v1.4.0
   ========================================================= */

/* Office header now has a right-side info cluster */
.er-office__header {
    flex-wrap: wrap;
    gap: .5em .75em;
}
.er-office__header-right {
    display: flex;
    align-items: center;
    gap: .6em;
    flex-wrap: wrap;
}
.er-office__precinct-count {
    font-size: .8em;
    color: var(--er-text-muted);
    padding: .15em .55em;
    background: var(--er-surface);
    border: 1px solid var(--er-border);
    border-radius: 999px;
}

/* Each candidate card now has a summary row + breakdown table */
.er-candidate__summary {
    display: flex;
    align-items: center;
    gap: 1em;
    flex-wrap: wrap;
    align-self: flex-start;
    flex: 0 0 400px;
    max-width: 400px;
    min-width: 220px;
    box-sizing: border-box;
}
.er-candidate__summary .er-candidate__identity { flex: 1; min-width: 160px; }
.er-candidate__summary .er-candidate__results  { flex: 2; min-width: 160px; }

/* Precinct breakdown table */
.er-precinct-breakdown {
    margin-top: .6em;
    padding-top: .6em;
    border-top: 1px dashed var(--er-border);
    overflow-x: auto;
    flex: 1 1 0;
    min-width: 0;
    align-self: stretch;
    box-sizing: border-box;
}

.er-precinct-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--er-table-font-size, 85%);
    min-width: 320px;
}

.er-precinct-table__head {
    padding: .3em .6em;
    text-align: center;
    font-weight: 600;
    font-size: .75em;
    color: var(--er-table-head-text, var(--er-text-muted));
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--er-table-head-bg, var(--er-surface));
    border: 1px solid var(--er-border);
    white-space: nowrap;
}

.er-precinct-table__head.er-precinct-table__total {
    color: var(--er-text);
    background: var(--er-border);
    font-size: .75em;
}

.er-precinct-table__cell {
    padding: .35em .6em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--er-border);
    background: var(--er-bg);
    font-size: .8em;
}

.er-precinct-table__cell--empty {
    color: var(--er-text-muted);
    font-style: italic;
}
/* ── Out-of-scope precinct cell (office has ED restriction) ─── */
.er-precinct-table__cell--na {
    background: var(--er-table-na-bg, #e0e0e0);
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        rgba(0,0,0,.07) 4px,
        rgba(0,0,0,.07) 8px
    );
    color: var(--er-table-na-text, #bbb);
    cursor: default;
    user-select: none;
    pointer-events: none;
}
/* NA cell dark rule moved to after the regular cell rule below */


.er-precinct-table__total-cell {
    font-weight: 700;
    background: var(--er-surface);
    border-left: 2px solid var(--er-border);
}

/* On the winner row, tint the breakdown table to match */
.er-candidate--winner .er-precinct-breakdown {
    border-top-color: rgba(255,255,255,.25);
}
.er-candidate--winner .er-precinct-table__head,
.er-candidate--winner .er-precinct-table__cell {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.2);
    color: rgba(255,255,255,.9);
}
.er-candidate--winner .er-precinct-table__head.er-precinct-table__total,
.er-candidate--winner .er-precinct-table__total-cell {
    background: rgba(255,255,255,.2);
    color: #fff;
}
.er-candidate--winner .er-precinct-table__cell--empty {
    color: rgba(255,255,255,.45);
}
.er-candidate--winner .er-precinct-table__cell--na {
    background: var(--er-table-na-bg, #e0e0e0);
    background-image: repeating-linear-gradient(
        -45deg, transparent, transparent 4px,
        rgba(0,0,0,.07) 4px, rgba(0,0,0,.07) 8px);
    color: var(--er-table-na-text, #bbb);
    pointer-events: none;
}

/* On the leading row — configurable via Options > Colours */
.er-candidate--leading .er-precinct-table__head {
    background: var(--er-leading-precinct-head-bg, #78350f);
    color: var(--er-leading-precinct-head-text, #ffffff);
    border-color: rgba(0,0,0,.1);
}
.er-candidate--leading .er-precinct-table__cell {
    background: var(--er-leading-precinct-cell-bg, #fef3c7) !important;
    color: var(--er-leading-precinct-cell-text, #1a1a1a) !important;
    border-color: rgba(0,0,0,.08);
}
.er-candidate--leading .er-precinct-table__head.er-precinct-table__total {
    background: var(--er-leading-precinct-head-bg, #78350f);
    color: var(--er-leading-precinct-head-text, #ffffff);
    opacity: .85;
}
.er-candidate--leading .er-precinct-table__total-cell {
    background: rgba(120,53,15,.1);
    color: inherit;
    font-weight: 700;
}
.er-candidate--leading .er-precinct-table__cell--empty {
    color: var(--er-text-muted);
}
.er-candidate--leading .er-precinct-table__cell--na {
    background: var(--er-table-na-bg, #e0e0e0);
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        rgba(0,0,0,.07) 4px,
        rgba(0,0,0,.07) 8px
    );
    color: var(--er-table-na-text, #bbb);
    pointer-events: none;
}

/* Dark theme */
/* Dark theme: head uses configurable vars (with dark fallback) */
.er-theme-dark .er-precinct-table__head {
    background: var(--er-table-head-bg, var(--er-surface));
    color: var(--er-table-head-text, var(--er-text-muted));
    border-color: var(--er-border);
}
.er-theme-dark .er-precinct-table__cell {
    background: var(--er-surface);
    border-color: var(--er-border);
}
/* NA cell must come AFTER regular cell rule — same specificity, last wins */
.er-theme-dark .er-precinct-table__cell--na {
    background: var(--er-table-na-bg, #1a1a2e) !important;
    color: var(--er-table-na-text, #555) !important;
}

/* Responsive — allow horizontal scroll on small screens */
@media (max-width: 640px) {
    .er-precinct-breakdown { margin-top: .5em; }
    .er-candidate__summary { gap: .65em; }
}

/* =========================================================
   ADMIN COLOR PICKER PREVIEW SWATCHES — v1.5.0
   Applied to front-end CSS as well for any overrides
   ========================================================= */
.er-color-field .er-color-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--er-surface);
    border-radius: var(--er-radius-sm);
    border: 1px solid var(--er-border);
    margin-top: 6px;
}
.er-color-field .er-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 2px solid rgba(0,0,0,.15);
    flex-shrink: 0;
    transition: background .2s;
}
.er-color-field .er-color-preview-label {
    font-weight: 700;
    font-size: .85em;
    font-family: monospace;
    transition: color .2s;
}

/* =========================================================
   RESULTS LEGEND / OFFICE ANCHOR NAV — v1.8.0
   ========================================================= */

.er-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4em .6em;
    padding: .6em .9em;
    margin-bottom: 1.1em;
    background: var(--er-surface);
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius-sm);
    font-size: .85em;
}

.er-legend__label {
    font-size: .72em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--er-text-muted);
    margin-right: .3em;
    flex-shrink: 0;
    white-space: nowrap;
}

.er-legend__link {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .25em .7em;
    border-radius: 999px;
    border: 1px solid var(--er-jumpto-border, var(--er-border));
    background: var(--er-bg);
    color: var(--er-primary) !important;
    font-weight: 500;
    text-decoration: none !important;
    transition: background .14s, border-color .14s, color .14s;
    white-space: nowrap;
    font-size: .85em;
}

.er-legend__link:hover,
.er-legend__link:focus {
    background: var(--er-jumpto-hover, var(--er-primary));
    border-color: var(--er-jumpto-hover, var(--er-primary));
    color: #ffffff !important;
    text-decoration: none !important;
}

/* The arrow icon inside each link */
.er-legend__arrow {
    font-size: .7em;
    opacity: .6;
}

/* Office section gets scroll-margin so sticky headers don't cover the target */
.er-office[id] {
    scroll-margin-top: 4em;
}

/* ── Feature legend strip ─────────────────────────────────────────── */
.er-feature-legend {
    font-size: .9em;
    line-height: 1.7;
    padding: .55rem .9rem;
    margin-bottom: 1.1rem;
    background: var(--er-surface, #f9fafb);
    border: 1px solid var(--er-border, rgba(0,0,0,.1));
    border-radius: .45rem;
    color: var(--er-text, inherit);
}

/* ── Precinct count suffix ────────────────────────────────────────── */
.er-precinct-suffix {
    font-weight: 400;
    opacity: .85;
    font-size: .9em;
    margin-left: .3em;
}

/* ── Jump To dropdown groups (native <details> + hover) ──────────── */
.er-legend__group {
    position: relative;
    display: inline-block;
}

/* The <summary> is the clickable/hoverable pill */
.er-legend__summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
    /* inherit the pill look from .er-legend__link (applied in markup) */
}
.er-legend__summary::-webkit-details-marker { display: none; }
.er-legend__summary::marker { content: ''; }

/* Active/open pill gets a filled look so it's clearly "the open one" */
.er-legend__group[open] > .er-legend__summary,
.er-legend__group:hover > .er-legend__summary {
    background: var(--er-jumpto-hover, var(--er-primary, #1a56db)) !important;
    border-color: var(--er-jumpto-hover, var(--er-primary, #1a56db)) !important;
    color: #ffffff !important;
}

/* Chevron rotates when open or hovered */
.er-legend__chevron {
    font-size: .58em;
    display: inline-block;
    transition: transform .2s ease;
    opacity: .85;
}
.er-legend__group[open] > .er-legend__summary .er-legend__chevron,
.er-legend__group:hover > .er-legend__summary .er-legend__chevron {
    transform: rotate(180deg);
}

/* ── The dropdown menu ─────────────────────────────────────────────── */
/* IMPORTANT: we deliberately do NOT use opacity / visibility / transform here.
   The template/SP Pagebuilder applies a running CSS transition/animation to
   those properties on generic list elements, which overrides even inline
   !important and pins the menu invisible. Using ONLY display sidesteps that
   entirely — display is not animatable, so nothing can hold it hidden. */
.er-legend .er-legend__group > .er-legend__menu {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    min-width: 210px;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    border-radius: .6em !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.08) !important;
    z-index: 99999 !important;
    padding: .4em !important;
    list-style: none !important;
    margin: 0 !important;
    /* explicitly neutralise any inherited animation/transition */
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

/* Reveal on hover OR when the <details> is toggled open via click.
   display:block cannot be overridden by any opacity/transform animation. */
.er-legend .er-legend__group:hover > .er-legend__menu,
.er-legend .er-legend__group[open] > .er-legend__menu {
    display: block !important;
}

/* Invisible hover bridge so moving from pill to menu doesn't close it */
.er-legend__group::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
    display: none;
}
.er-legend__group:hover::after { display: block; }

.er-legend__menu li { margin: 0; padding: 0; list-style: none; }

.er-legend__menu-item {
    animation: none !important;
    transition: background .12s ease, color .12s ease !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6em;
    padding: .5em .85em;
    border-radius: .4em;
    color: var(--er-primary, #1a56db) !important;
    text-decoration: none !important;
    font-size: .88em;
    font-weight: 500;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease, padding-left .12s ease;
}
.er-legend__menu-item .er-legend__arrow {
    font-size: .8em;
    opacity: .5;
    transition: opacity .12s ease;
}
.er-legend__menu-item:hover,
.er-legend__menu-item:focus {
    background: var(--er-jumpto-hover, var(--er-primary, #1a56db));
    color: #ffffff !important;
    padding-left: 1.05em;
    text-decoration: none !important;
}
.er-legend__menu-item:hover .er-legend__arrow,
.er-legend__menu-item:focus .er-legend__arrow {
    opacity: 1;
}

/* Ensure the nav never clips the dropdown */
.er-legend { overflow: visible !important; }

/* ── Custom jump-to link variant ─────────────────────────────────── */
.er-legend__link--custom {
    border-style: dashed;
    opacity: .85;
}
.er-legend__link--custom:hover {
    opacity: 1;
}


/* ── Jump To — centred variant ────────────────────────────────────────── */
.er-legend--centered {
    justify-content: center;
    text-align: center;
}

/* ── Jump To — configurable border + hover colour via CSS vars ─────────── */


/* ── Feature legend — centred variant ─────────────────────────────────── */
.er-feature-legend--centered {
    text-align: center;
}

/* ── Counting badge — centred variant ─────────────────────────────────── */
.er-counting-badge--centered {
    display: flex;
    justify-content: center;
    border-radius: 999px;
}

/* ── Counting badge — "complete" state (closed, no certified date) ──────── */
.er-counting-badge--complete {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
}

/* ── Precinct table vertical alignment — configurable via Options ──────── */
/* Default: top-aligned (align-items: flex-start on base rule)               */
/* .er-precinct-align-top keeps top alignment (same as default)              */
.er-precinct-align-top .er-candidate {
    align-items: flex-start;
}
/* .er-precinct-align-center switches to vertical centering                  */
.er-precinct-align-center .er-candidate {
    align-items: center;
}

/* =========================================================
   MOBILE RESPONSIVE — v1.18.3
   Breakpoints: tablet ≤ 900px  |  phone ≤ 640px  |  small ≤ 400px
   ========================================================= */

/* ── Office title centre variant ────────────────────────── */
.er-office__title--centered {
    text-align: center;
    flex: 1;
}

/* ── Tablet (≤ 900px) ─────────────────────────────────── */
@media (max-width: 900px) {
    /* Candidate card: allow summary to shrink */
    .er-candidate__summary {
        flex: 1 1 280px;
        max-width: 100%;
    }
    .er-precinct-breakdown {
        flex: 1 1 280px;
        min-width: 0;
    }
    /* Office header stacks on small tablets */
    .er-office__header {
        flex-direction: column;
        align-items: flex-start;
    }
    .er-office__header-right {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ── Phone (≤ 640px) ──────────────────────────────────── */
@media (max-width: 640px) {
    /* Wrap base */
    .er-wrap {
        font-size: 95%;
    }

    /* Results header */
    .er-results__header {
        flex-direction: column;
        align-items: stretch;
        gap: .75em;
        padding: .75em 1em;
    }
    .er-results__title {
        font-size: 1.3em;
    }
    /* er-results__meta-row removed */

    /* Candidate card: full-width stack */
    .er-candidate {
        flex-direction: column;
        padding: .75em .85em;
    }
    .er-candidate__summary {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 0;
    }
    .er-precinct-breakdown {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        align-self: auto;
        border-top: 1px dashed var(--er-border, rgba(0,0,0,.12));
        padding: .5em 0 .25em;
    }

    /* Progress bar full width */
    .er-candidate__results {
        width: 100%;
    }

    /* Jump To legend wraps + smaller text */
    .er-legend {
        gap: .35em;
        padding: .5em .75em;
        font-size: .8em;
    }
    .er-legend__link {
        font-size: .8em;
        padding: .2em .55em;
    }

    /* Office header */
    .er-office__header {
        flex-direction: column;
        align-items: flex-start;
        padding: .7em .85em;
    }
    .er-office__title {
        font-size: .95em;
    }
    .er-office__header-right {
        width: 100%;
        flex-wrap: wrap;
        gap: .35em;
    }
    .er-office__precinct-count,
    .er-office__total {
        font-size: .8em;
    }

    /* Precinct table: allow horizontal scroll, smaller cells */
    .er-precinct-breakdown {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .er-precinct-table {
        font-size: .78em;
        min-width: 0;
    }
    .er-precinct-table__head,
    .er-precinct-table__cell {
        padding: .25em .4em;
    }

    /* Election cards: single column */
    .er-election-cards {
        grid-template-columns: 1fr;
        gap: .75em;
    }
    .er-election-card {
        padding: 1em;
    }

    /* Feature legend */
    .er-feature-legend {
        font-size: .82em;
        padding: .45em .75em;
    }

    /* Counting badge full-width when centred */
    .er-counting-badge--centered,
    .er-certified-badge {
        justify-content: center;
        width: 100%;
        text-align: center;
    }

    /* Vote entry precinct tiles: 2-col grid */
    .er-precinct-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Vote candidate row */
    .er-vote-candidate {
        flex-direction: column;
        align-items: flex-start;
        gap: .5em;
    }
    .er-vote-candidate__input-wrap {
        align-self: stretch;
    }
    .er-vote-input {
        width: 100%;
        max-width: 180px;
    }
    .er-vote-form__actions {
        flex-direction: column;
        gap: .6em;
    }
    .er-btn--large {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Multi vote entry table: scroll */
    .er-multi-table {
        font-size: .8em;
    }
    .er-vote-input-sm {
        width: 56px;
    }
}

/* ── Small phone (≤ 400px) ─────────────────────────────── */
@media (max-width: 400px) {
    .er-results__title {
        font-size: 1.15em;
    }
    .er-candidate__name {
        font-size: .95em;
    }
    .er-precinct-grid {
        grid-template-columns: 1fr;
    }
    .er-legend {
        font-size: .75em;
    }
    .er-precinct-check-grid,
    .er-prec-check-grid {
        gap: .3em;
    }
}

/* ── Seats badge in office header ─────────────────────────── */
.er-office__seats-badge {
    display: inline-flex;
    align-items: center;
    padding: .2em .65em;
    background: var(--er-primary, #1a56db);
    color: #fff;
    border-radius: 999px;
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* ── Rank badges — 1st/2nd/3rd/Nth ───────────────────────── */
.er-badge--rank {
    font-weight: 700;
    letter-spacing: .03em;
}
/* All winner rank badges — same configurable colour */
.er-badge--rank.er-badge--winner {
    background: var(--er-winner-badge-bg, var(--er-accent, #057a55));
    color: var(--er-winner-badge-text, #ffffff);
}
/* Leading rank badges keep the accent color */
.er-badge--rank.er-badge--leading {
    background: var(--er-accent, #057a55);
    color: #fff;
}

/* Enter Votes button — centred block below the title area */
.er-results__header .er-btn {
    display: inline-block;
    margin-top: .75em;
}

/* ── Precinct table header — tooltip (ℹ) + map popup ─────────────────── */
.er-prec-th {
    position: relative;
}
.er-prec-th__info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: .3em;
    font-size: .75em;
    background: var(--er-primary, #1a56db);
    color: #fff;
    border-radius: 50%;
    cursor: help;
    vertical-align: middle;
    flex-shrink: 0;
    line-height: 1;
}
/* CSS tooltip on the ℹ — shown via title attribute, styled by browser default */
/* For a custom CSS tooltip, use the data-tip approach below */
.er-prec-th__name--map {
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

/* Map popup via JS (added dynamically) */
.er-map-popup {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 2px solid var(--er-primary, #1a56db);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    padding: 6px;
    pointer-events: none;
    display: none;
    max-width: 340px;
}
/* Wrapper makes the image + overlay a single positioning context */
.er-map-popup__img-wrap {
    position: relative;
    display: block;
    line-height: 0;
}
.er-map-popup img {
    display: block;
    max-width: 100%;
    max-height: 260px;
    width: 100%;
    border-radius: 3px;
    object-fit: cover;
}
/* Voter registration count — upper-left badge over image */
.er-map-popup__voters {
    position: absolute;
    top: var(--er-voter-badge-top, -8px);
    left: 7px;
    right: 7px;
    background: #ffffff;
    color: #000000;
    font-size: .78em;
    font-weight: 700;
    line-height: 1.35;
    padding: .45em .7em;
    border-radius: 6px;
    border: 1.5px solid #cccccc;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
    letter-spacing: .01em;
    display: none; /* shown by JS when voter_count > 0 */
    pointer-events: none;
    white-space: normal;
    max-width: calc(100% - 14px);
    box-sizing: border-box;
}

/* Description text superimposed over the bottom of the image */
.er-map-popup__desc {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top,
        rgba(0,0,0,.72) 0%,
        rgba(0,0,0,.45) 55%,
        transparent     100%);
    color: #ffffff;
    font-size: .8em;
    font-weight: 600;
    line-height: 1.3;
    padding: .6em .65em .5em;
    border-radius: 0 0 3px 3px;
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
    display: none; /* shown by JS when data-desc is non-empty */
}
.er-map-popup__label {
    font-size: .75em;
    font-weight: 600;
    color: var(--er-primary, #1a56db);
    text-align: center;
    margin-top: 4px;
    line-height: 1.3;
}

/* ── Table bottom note ────────────────────────────────────────────────── */
.er-precinct-table__note-foot .er-precinct-table__note {
    font-size: .8em;
    color: var(--er-text-muted);
    padding: .4em .6em;
    text-align: left;
    font-style: italic;
    background: transparent;
    border: none;
    border-top: 1px dashed var(--er-border, rgba(0,0,0,.1));
}
.er-theme-dark .er-precinct-table__note-foot .er-precinct-table__note {
    color: var(--er-text-muted);
    border-top-color: var(--er-border);
}

/* ── Judge Retention / YES-NO Table ─────────────────────────────────────── */
/* Retention tables container — flex so multiple tables sit side by side */
.er-retention-tables-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
    justify-content: center;
    margin-top: 1em;
}
.er-retention-wrap {
    margin-top: 0;
    max-width: 680px;
    width: 100%;
    flex: 1 1 480px;
}
/* ── Retained badge (certified + YES wins) ─────────────────── */
.er-retention-retained-badge,
.er-retention-not-retained-badge {
    display: inline-flex;
    align-items: center;
    font-size: .78em;
    font-weight: 700;
    letter-spacing: .06em;
    padding: .3em .8em;
    border-radius: 2em;
    margin-bottom: .6em;
    text-transform: uppercase;
    gap: .25em;
}
.er-retention-retained-badge {
    background: var(--er-retained-bg, #065f46);
    color: var(--er-retained-text, #ffffff);
}
.er-retention-not-retained-badge {
    background: var(--er-not-retained-bg, #9b1c1c);
    color: var(--er-not-retained-text, #ffffff);
}

.er-retention-question {
    font-weight: 700;
    font-size: .88em;
    text-align: center;
    padding: .6em 1em;
    background: var(--er-surface, #f9fafb);
    border: 1px solid var(--er-border, rgba(0,0,0,.1));
    border-bottom: none;
    letter-spacing: .01em;
}
.er-retention-breakdown {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.er-retention-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--er-table-font-size, .85em);
    min-width: 480px;
}
.er-retention-table__th {
    background: var(--er-table-head-bg, #1a3a6b);
    color: var(--er-table-head-text, #ffffff);
    text-align: center;
    font-weight: 700;
    font-size: .8em;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.15);
    letter-spacing: .03em;
    vertical-align: middle;
    white-space: nowrap;
}
.er-retention-table__th.er-retention-table__district {
    text-align: left;
    width: 28%;
}
.er-retention-table__td {
    padding: 5px 10px;
    text-align: center;
    border: 1px solid var(--er-border, rgba(0,0,0,.1));
    vertical-align: middle;
}
.er-retention-table__td--district {
    text-align: left;
    font-weight: 600;
    padding-left: 14px;
    background: inherit;
}
.er-retention-table__td--total {
    background: var(--er-surface, #f9fafb);
}
.er-retention-table__td--pct {
    font-weight: 600;
}
.er-retention-table__td--dash {
    color: var(--er-text-muted);
    letter-spacing: .05em;
}
.er-retention-table tbody tr:nth-child(odd) td {
    background: var(--er-bg, #fff);
}
.er-retention-table tbody tr:nth-child(even) td {
    background: var(--er-surface, #f9fafb);
}
.er-retention-table__total-row td {
    background: var(--er-surface, #e8edf5) !important;
    font-weight: 700;
    border-top: 2px solid var(--er-primary, #1a3a6b);
}
.er-retention-table__td--label {
    text-align: center;
    font-size: .82em;
    letter-spacing: .03em;
}
.er-retention-table__td--grand-yes {
    color: var(--er-secondary, #e02424);
    font-weight: 700;
}

/* Dark theme */
.er-theme-dark .er-retention-question {
    background: var(--er-surface);
    color: var(--er-text);
    border-color: var(--er-border);
}
.er-theme-dark .er-retention-table__total-row td {
    background: var(--er-surface) !important;
    border-top-color: var(--er-primary);
}