/* registration.css - voter registration hub and state pages (prefix rg-). Tokens only. */

/* Controls and map */
.rg-controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 0 0 6px; }
.rg-note { margin: 4px 0 0; }
.rg-map-wrap { touch-action: manipulation; max-width: 960px; }
.rg-map { width: 100%; height: auto; display: block; }
.rg-map .rg-s { fill: var(--rg-fill, var(--pc-border-light)); stroke: var(--pc-surface); stroke-width: 1; cursor: pointer; }
.rg-map .rg-s.rg-hex { stroke: var(--pc-surface); stroke-width: 1.5; }
.rg-map .rg-s.is-focus { stroke: var(--pc-text); stroke-width: 1.6; }
.rg-map .rg-hex-label { font-family: var(--pc-sans); font-size: 11px; font-weight: 700; fill: var(--pc-text); paint-order: stroke;
    stroke: var(--pc-surface); stroke-width: 2.5px; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.rg-tip-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; display: inline-block; margin-top: 4px; }

/* Active registered per citizen adult: one-hue gold ramp in the site's own accent, not a party colour
   (deepening to the orange accent on the light ground) */
body { --rg-seq: var(--us-nav-accent); --rg-seq-top: color-mix(in srgb, var(--us-nav-accent) 45%, var(--pc-accent)); }
body.dark-mode { --rg-seq-top: var(--us-nav-accent); }
.rg-c-1 { --rg-fill: color-mix(in srgb, var(--rg-seq) 18%, var(--pc-surface)); }
.rg-c-2 { --rg-fill: color-mix(in srgb, var(--rg-seq) 42%, var(--pc-surface)); }
.rg-c-3 { --rg-fill: color-mix(in srgb, var(--rg-seq) 70%, var(--pc-surface)); }
.rg-c-4 { --rg-fill: var(--rg-seq); }
.rg-c-5 { --rg-fill: var(--rg-seq-top); }
body.dark-mode .rg-c-4 { --rg-fill: color-mix(in srgb, var(--rg-seq) 88%, var(--pc-surface)); }
.rg-c-none, .rg-mg-none { --rg-fill: var(--pc-border-light); }

/* Party registration margin: diverging ramp on the party tokens (same steps as the House map) */
.rg-mg-d1 { --rg-fill: color-mix(in srgb, var(--pc-party-dem) 22%, var(--pc-surface)); }
.rg-mg-d2 { --rg-fill: color-mix(in srgb, var(--pc-party-dem) 45%, var(--pc-surface)); }
.rg-mg-d3 { --rg-fill: color-mix(in srgb, var(--pc-party-dem) 70%, var(--pc-surface)); }
.rg-mg-d4 { --rg-fill: color-mix(in srgb, var(--pc-party-dem) 92%, var(--pc-surface)); }
.rg-mg-r1 { --rg-fill: color-mix(in srgb, var(--pc-party-rep) 22%, var(--pc-surface)); }
.rg-mg-r2 { --rg-fill: color-mix(in srgb, var(--pc-party-rep) 45%, var(--pc-surface)); }
.rg-mg-r3 { --rg-fill: color-mix(in srgb, var(--pc-party-rep) 70%, var(--pc-surface)); }
.rg-mg-r4 { --rg-fill: color-mix(in srgb, var(--pc-party-rep) 92%, var(--pc-surface)); }
.rg-l-pending { --rg-fill: var(--pc-border); }
.rg-l-none { --rg-fill: var(--pc-surface); }
.rg-map .rg-s.rg-l-none { stroke: var(--pc-border); }
.rg-l-noparty { --rg-fill: var(--pc-border-light); }
.rg-map .rg-s.rg-l-noparty, .us-map-legend i.rg-l-noparty {
    fill: var(--pc-border-light); background: var(--pc-border-light);
    background-image: repeating-linear-gradient(135deg, var(--pc-text-meta) 0 2px, transparent 2px 6px);
}
.rg-map .rg-s.rg-l-noparty { fill: url(#rg-hatch); }
.rg-hatch-bg { fill: var(--pc-border-light); }
.rg-hatch-fg { fill: var(--pc-text-meta); opacity: 0.7; }
.us-map-legend i { background: var(--rg-fill, var(--pc-border-light)); }

/* Legend ramps */
.rg-ramp { position: relative; display: inline-flex; padding-bottom: 14px; margin-right: 12px; }
.rg-ramp i { width: 26px; height: 10px; background: var(--rg-fill); display: block; border: 0; }
.rg-ramp b { position: absolute; top: 12px; transform: translateX(-50%); font-weight: 400; font-size: 10px; color: var(--pc-text-meta);
    font-variant-numeric: tabular-nums; white-space: nowrap; }
.rg-ramp-mg i { width: 22px; }
.rg-ramp-mg b:first-of-type { transform: none; }
.rg-ramp-mg b:last-of-type { transform: translateX(-100%); }

/* Tables */
.pc-table.rg-table :is(th, td):not(.rg-num) { text-align: left; }
.pc-table.rg-table :is(th, td).rg-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rg-table a { color: var(--pc-text); }
.rg-none { color: var(--pc-text-meta); }
.pc-table.rg-table td.rg-dash { text-align: center; color: var(--pc-text-meta); }
.rg-over { color: var(--pc-text); }
.rg-tfilter { margin: 0 0 10px; }
.rg-tfilter .pc-input { width: 100%; max-width: 320px; box-sizing: border-box; }
.rg-showall { margin-top: 10px; }
body .pc-btn.rg-showall[hidden] { display: none; }   /* outranks site.css's body.ps-site .pc-btn { display: inline-flex } */
.rg-empty td { color: var(--pc-text-meta); }
.rg-date, .rg-src { white-space: nowrap; color: var(--pc-text-secondary); }
.rg-src a { color: var(--pc-text-secondary); }
.rg-towns { color: var(--pc-text-meta); font-size: 11px; white-space: nowrap; }
.rg-total td { border-bottom: 2px solid var(--pc-text); font-weight: 700; }
.rg-mg-cell { display: inline-flex; align-items: center; gap: 6px; }
.rg-mg-cell i { width: 10px; height: 10px; display: inline-block; background: var(--rg-fill); border: 1px solid var(--pc-border); }
@media (max-width: 768px) {
    .rg-table .rg-src, .rg-table th:nth-child(9), .rg-table td:nth-child(9) { display: none; }
}
/* Narrow screens: secondary columns go, nothing scrolls sideways. The hub keeps state, registered and the share of
   citizens 18+ (party columns are on the map and the state pages); county tables keep the name and the two headline columns. */
@media (max-width: 600px) {
    #rg-table :is(th, td):nth-child(3), #rg-table :is(th, td):nth-child(5), #rg-table :is(th, td):nth-child(6),
    #rg-table :is(th, td):nth-child(7), #rg-table .rg-date { display: none; }
    .rg-cty :is(th, td):nth-child(4), .rg-cty :is(th, td):nth-child(5) { display: none; }
    .rg-party :is(th, td):nth-child(4), .rg-party :is(th, td):nth-child(5), .rg-party :is(th, td):nth-child(6) { display: none; }
    .pc-table-wrap:has(.rg-table) { overflow-x: visible; }
    .pc-table.rg-table th.rg-num { white-space: normal; }
    .pc-table.rg-table td { padding-left: 6px; padding-right: 6px; }
}

/* State page: headline numbers as a pc-hero-strip (ink rule on the election office counts, party colour on the party counts) */
.rg-hero { margin-bottom: 8px; }
.rg-hero .pc-hero-party { margin-bottom: 12px; }
.rg-hero .pc-hero-party { border-left: 0; padding-left: 0; padding-right: 16px; }
.rg-hero :is(.rg-hero-dem, .rg-hero-rep, .rg-hero-una) .pc-hero-name::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: 0; background: var(--party-color); }
.rg-hero-dem { --party-color: var(--pc-party-dem); }
.rg-hero-rep { --party-color: var(--pc-party-rep); }
.rg-hero-una { --party-color: var(--pc-nc); }
.rg-hero .pc-hero-pct { font-size: 24px; }
.rg-hero-src { font-family: var(--pc-sans); font-size: 11px; color: var(--pc-text-meta); margin-top: 3px; line-height: 1.35; }
.rg-chart { height: 340px; }
.rg-chart svg { overflow: visible; }
.rg-chart-cps { height: 240px; }
.rg-key-diamond { display: inline-block; width: 8px; height: 8px; background: var(--pc-accent); transform: rotate(45deg); margin: 0 5px 0 2px; vertical-align: -1px; }
@media (max-width: 600px) { .rg-chart { height: 280px; } .rg-chart-cps { height: 210px; } .rg-hero .pc-hero-pct { font-size: 20px; } }
.us-map-legend[hidden], .us-map-legend [hidden] { display: none; }