/* Scoped root wrapper — everything below is nested under this class so our
   selectors have enough specificity to win against theme/block-editor CSS
   (e.g. WordPress's core "layout":"inherit" block styles, which generate
   fairly aggressive rules for direct content children). */
.ler-root {
    --ler-bg: transparent;
    --ler-text: #111111;
    --ler-text-sub: #666666;
    --ler-text-faint: #999999;
    --ler-border: #dddddd;
    --ler-border-light: #e5e5e5;
    --ler-stage-bg: #f5f5f5;
    --ler-panel-bg: #fafafa;
    --ler-btn-bg: #ffffff;
    --ler-btn-bg-hover: #f0f0f0;
    --ler-btn-border: #cccccc;
    --ler-leader-bg: #eef7ee;
    --ler-shape-hover-stroke: #333333;
    --ler-settings-bg: rgba(255, 255, 255, 0.97);
    --ler-settings-border: rgba(0, 0, 0, 0.15);
    --ler-settings-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);

    box-sizing: border-box;
    max-width: none;
    font-size: 16px;
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--ler-text);
    background: var(--ler-bg);

    /* Fills 100% of whatever container it's placed in. Deliberately NOT
       using a "100vw + negative margin" full-bleed hack here — that trick
       only works correctly if the page's content column is perfectly
       centered in the viewport, and breaks (shifts everything sideways)
       on themes/templates that don't match that assumption exactly. Since
       the page this loads on already uses a fullscreen/no-sidebar
       template, filling 100% of the container achieves the same
       full-width result without fighting the theme's own layout. */
    width: 100%;
}

.ler-root.ler-dark {
    --ler-bg: transparent;
    --ler-text: #f0f0f0;
    --ler-text-sub: #bbbbbb;
    --ler-text-faint: #888888;
    --ler-border: #444444;
    --ler-border-light: #3a3a3a;
    --ler-stage-bg: #1c1c1e;
    --ler-panel-bg: #232325;
    --ler-btn-bg: #2e2e30;
    --ler-btn-bg-hover: #3a3a3c;
    --ler-btn-border: #555555;
    --ler-leader-bg: #1c3320;
    --ler-shape-hover-stroke: #ffffff;
    --ler-settings-bg: rgba(35, 35, 37, 0.97);
    --ler-settings-border: rgba(255, 255, 255, 0.18);
    --ler-settings-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.ler-root * {
    box-sizing: border-box;
}

.ler-root .ler-back-button {
    display: inline-block;
    margin: 12px 0 0 24px;
    padding: 8px 14px;
    background: var(--ler-btn-bg);
    color: var(--ler-text);
    border: 1px solid var(--ler-btn-border);
    border-radius: 6px;
    font-size: 0.9em;
    cursor: pointer;
}

.ler-root .ler-back-button:hover {
    background: var(--ler-btn-bg-hover);
}

/* ---- Brand overlay (top-left on the map) ---- */
.ler-root .ler-brand-overlay {
    position: absolute;
    top: 18px;
    left: 20px;
    z-index: 40;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 0px 1px rgba(0, 0, 0, 0.4);
}

.ler-root .ler-brand-title {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--ler-text);
    line-height: 1.2;
}

.ler-root .ler-brand-subtitle {
    font-size: 0.85em;
    font-weight: 500;
    color: var(--ler-text-sub);
    margin-top: 2px;
}

/* ---- Settings button + panel (bottom-right on the map; panel opens
   upward since the button sits at the bottom edge) ---- */
.ler-root .ler-settings-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    background: var(--ler-btn-bg);
    color: var(--ler-text);
    border: 1px solid var(--ler-btn-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em;
    line-height: 1;
    box-shadow: var(--ler-settings-shadow);
}

.ler-root .ler-settings-button:hover {
    background: var(--ler-btn-bg-hover);
}

.ler-root .ler-settings-panel {
    position: absolute;
    right: 0;
    z-index: 40;
    width: 200px;
    background: var(--ler-settings-bg);
    border: 1px solid var(--ler-settings-border);
    border-radius: 10px;
    box-shadow: var(--ler-settings-shadow);
    padding: 12px 14px;
    font-size: 0.9em;
}

.ler-root .ler-settings-panel-up {
    bottom: 44px;
}

.ler-root .ler-settings-panel[hidden] {
    display: none;
}

.ler-root .ler-settings-label {
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--ler-text);
}

.ler-root .ler-theme-toggle {
    display: flex;
    border: 1px solid var(--ler-btn-border);
    border-radius: 6px;
    overflow: hidden;
}

.ler-root .ler-theme-toggle button {
    flex: 1;
    padding: 6px 0;
    background: var(--ler-btn-bg);
    color: var(--ler-text);
    border: none;
    cursor: pointer;
    font-size: 0.85em;
}

.ler-root .ler-theme-toggle button + button {
    border-left: 1px solid var(--ler-btn-border);
}

.ler-root .ler-theme-toggle button:hover {
    background: var(--ler-btn-bg-hover);
}

.ler-root .ler-theme-toggle button.ler-active {
    background: var(--ler-text);
    color: var(--ler-stage-bg);
}

/* ---- The map stage ---- */
/* Fixed size regardless of which layer (overview or detail) is showing, so
   clicking a district never causes a layout jump. The two SVG layers stack
   absolutely inside it and crossfade between each other. aspect-ratio here
   is a fallback default only — the real value (computed from the actual
   map's projection, ~1.23 with all 50 states + AK/HI insets, Albers
   equal-area conic) is set inline
   by PHP and always takes precedence. */
.ler-root .ler-map-stage {
    position: relative;
    width: 100%;
    max-width: none;
    max-height: 92vh;
    aspect-ratio: 1.2268;
    margin: 0;
    overflow: hidden;
    background: var(--ler-stage-bg);
    cursor: grab;
    touch-action: none;
}

.ler-root .ler-map-stage:active {
    cursor: grabbing;
}


.ler-root .ler-stage-layer {
    position: absolute;
    inset: 0;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.ler-root .ler-stage-layer-hidden {
    opacity: 0;
    pointer-events: none;
}

.ler-root .ler-stage-layer svg {
    width: 100%;
    height: 100%;
    display: block;
}

.ler-root .ler-overview-svg .ler-shape-path {
    cursor: pointer;
}

.ler-root .ler-shape-path {
    transition: fill 0.4s ease;
}

.ler-root .ler-shape-path:hover {
    stroke: var(--ler-shape-hover-stroke);
    stroke-width: 2;
}

/* Table area sits full-width below the map, not beside it. */
.ler-root .ler-table-area {
    width: 100%;
}

.ler-root .ler-race {
    border: 1px solid var(--ler-border);
    border-radius: 8px;
    padding: 16px 20px;
    margin: 0 0 20px;
    background: var(--ler-panel-bg);
}

.ler-root .ler-race-title {
    margin: 0 0 4px;
    font-size: 1.1em;
    line-height: 1.3;
}

.ler-root .ler-precincts {
    margin: 0 0 12px;
    color: var(--ler-text-sub);
    font-size: 0.9em;
}

.ler-root .ler-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1em;
}

.ler-root .ler-table td {
    padding: 8px 4px;
    border-bottom: 1px solid var(--ler-border-light);
}

.ler-root .ler-table tr:last-child td {
    border-bottom: none;
}

.ler-root .ler-name {
    font-weight: 500;
}

.ler-root .ler-party {
    font-weight: 400;
    color: var(--ler-text-sub);
    font-size: 0.9em;
}

.ler-root .ler-incumbent {
    font-weight: 600;
    color: var(--ler-text-sub);
    font-size: 0.85em;
}

.ler-root .ler-votes {
    text-align: right;
    white-space: nowrap;
}

.ler-root .ler-pct {
    text-align: right;
    white-space: nowrap;
    width: 64px;
    font-variant-numeric: tabular-nums;
}

.ler-root .ler-leader {
    background: var(--ler-leader-bg);
}

.ler-root .ler-leader .ler-name {
    font-weight: 700;
}

.ler-root .ler-updated {
    margin: 12px 0 0;
    font-size: 0.8em;
    color: var(--ler-text-faint);
}

.ler-root .ler-empty {
    color: var(--ler-text-sub);
    font-style: italic;
}

/* Custom hover tooltip — deliberately OUTSIDE .ler-root since it's
   positioned via fixed coordinates following the cursor, not flowed with
   the rest of the content. Its dark styling already reads fine on both
   light and dark map themes, so it doesn't need its own dark-mode variant. */
.ler-tooltip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    background: rgba(20, 20, 20, 0.92);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85em;
    line-height: 1.4;
    max-width: 240px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}