/* Shared six-stage appearance system for IV pages.
 * Removing this stylesheet and controller restores pre-rollout theme behavior.
 */

:root {
  --iv-appearance-scale-ready: 1;
}

:root[data-appearance-scale][data-appearance-step="0"] {
  color-scheme: light;
  --iv-appearance-page-bg: #fcfaf5;
  --iv-appearance-page-text: #242220;
  --iv-paper1: var(--iv-appearance-page-bg);
  --iv-paper: var(--iv-appearance-page-bg);
  --iv-cream: var(--iv-appearance-page-bg);
  --iv-ink: var(--iv-appearance-page-text);
  --iv-neutral: #4f4f4f;
  --iv-neutral-2: #c3c3c3;
  --iv-accent-text: #94401f;
  --iv-appearance-accent-bg: #de7441;
  --iv-appearance-field-bg: #f0f0f0;
  --iv-appearance-field-text: #242220;
  --iv-appearance-placeholder: #4f4f4f;
  --iv-appearance-finder-bg: #4f4f4f;
  --iv-appearance-finder-text: #f9f9f9;
  --iv-appearance-finder-accent: #ffd4c2;
  --iv-appearance-record-bg: #f0f0f0;
  --iv-appearance-record-text: #242220;
  --iv-appearance-record-accent: #94401f;
  --iv-appearance-on-accent: #242220;
  --iv-on-party: var(--iv-light);
}

:root[data-appearance-scale][data-appearance-step="1"] {
  color-scheme: light;
  --iv-appearance-page-bg: #d0d0d0;
  --iv-appearance-page-text: #242220;
  --iv-paper1: var(--iv-appearance-page-bg);
  --iv-paper: var(--iv-appearance-page-bg);
  --iv-cream: var(--iv-appearance-page-bg);
  --iv-ink: var(--iv-appearance-page-text);
  --iv-neutral: #505050;
  --iv-neutral-2: #a8a8a8;
  --iv-accent-text: #873a1e;
  --iv-appearance-accent-bg: #de7441;
  --iv-appearance-field-bg: #dedede;
  --iv-appearance-field-text: #242220;
  --iv-appearance-placeholder: #505050;
  --iv-appearance-finder-bg: #505050;
  --iv-appearance-finder-text: #f9f9f9;
  --iv-appearance-finder-accent: #ffd4c2;
  --iv-appearance-record-bg: #dedede;
  --iv-appearance-record-text: #242220;
  --iv-appearance-record-accent: #873a1e;
  --iv-appearance-on-accent: #242220;
  --iv-on-party: var(--iv-light);
}

:root[data-appearance-scale][data-appearance-step="2"] {
  color-scheme: light;
  --iv-appearance-page-bg: #a5a5a5;
  --iv-appearance-page-text: #242220;
  --iv-paper1: var(--iv-appearance-page-bg);
  --iv-paper: var(--iv-appearance-page-bg);
  --iv-cream: var(--iv-appearance-page-bg);
  --iv-ink: var(--iv-appearance-page-text);
  --iv-neutral: #353535;
  --iv-neutral-2: #b8b8b8;
  --iv-accent-text: #642811;
  --iv-appearance-accent-bg: #de7441;
  --iv-appearance-field-bg: #b8b8b8;
  --iv-appearance-field-text: #242220;
  --iv-appearance-placeholder: #454545;
  --iv-appearance-finder-bg: #353535;
  --iv-appearance-finder-text: #f9f9f9;
  --iv-appearance-finder-accent: #ffd4c2;
  --iv-appearance-record-bg: #b8b8b8;
  --iv-appearance-record-text: #242220;
  --iv-appearance-record-accent: #642811;
  --iv-appearance-on-accent: #242220;
  --iv-on-party: var(--iv-light);
}

:root[data-appearance-scale][data-appearance-step="3"] {
  color-scheme: dark;
  --iv-appearance-page-bg: #707070;
  --iv-appearance-page-text: #f9f9f9;
  --iv-paper1: var(--iv-appearance-page-bg);
  --iv-paper: var(--iv-appearance-page-bg);
  --iv-cream: var(--iv-appearance-page-bg);
  --iv-ink: var(--iv-appearance-page-text);
  --iv-neutral: #f7f7f7;
  --iv-neutral-2: #606060;
  --iv-uni-black: var(--iv-appearance-page-bg);
  --iv-strong-bg: #383838;
  --iv-banner-bg: #606060;
  --iv-accent-text: #fff3ed;
  --iv-appearance-accent-bg: #de7441;
  --iv-appearance-field-bg: #606060;
  --iv-appearance-field-text: #f9f9f9;
  --iv-appearance-placeholder: #e8e8e8;
  --iv-appearance-finder-bg: #f7f7f7;
  --iv-appearance-finder-text: #242220;
  --iv-appearance-finder-accent: #642811;
  --iv-appearance-record-bg: #606060;
  --iv-appearance-record-text: #f9f9f9;
  --iv-appearance-record-accent: #ffd4c2;
  --iv-appearance-on-accent: #242220;
  --iv-on-party: var(--iv-dark);
}

:root[data-appearance-scale][data-appearance-step="4"] {
  color-scheme: dark;
  --iv-appearance-page-bg: #484848;
  --iv-appearance-page-text: #f9f9f9;
  --iv-paper1: var(--iv-appearance-page-bg);
  --iv-paper: var(--iv-appearance-page-bg);
  --iv-cream: var(--iv-appearance-page-bg);
  --iv-ink: var(--iv-appearance-page-text);
  --iv-neutral: #d8d8d8;
  --iv-neutral-2: #6c6c6c;
  --iv-uni-black: var(--iv-appearance-page-bg);
  --iv-strong-bg: #242424;
  --iv-banner-bg: #393939;
  --iv-accent-text: #ffb18f;
  --iv-appearance-accent-bg: #de7441;
  --iv-appearance-field-bg: #393939;
  --iv-appearance-field-text: #f9f9f9;
  --iv-appearance-placeholder: #cfcfcf;
  --iv-appearance-finder-bg: #d8d8d8;
  --iv-appearance-finder-text: #242220;
  --iv-appearance-finder-accent: #873a1e;
  --iv-appearance-record-bg: #393939;
  --iv-appearance-record-text: #f9f9f9;
  --iv-appearance-record-accent: #f2b08e;
  --iv-appearance-on-accent: #242220;
  --iv-on-party: var(--iv-dark);
}

:root[data-appearance-scale][data-appearance-step="5"] {
  color-scheme: dark;
  --iv-appearance-page-bg: #1d1d1d;
  --iv-appearance-page-text: #f9f9f9;
  --iv-paper1: var(--iv-appearance-page-bg);
  --iv-paper: var(--iv-appearance-page-bg);
  --iv-cream: var(--iv-appearance-page-bg);
  --iv-ink: var(--iv-appearance-page-text);
  --iv-neutral: #a5a5a5;
  --iv-neutral-2: #4a4a4a;
  --iv-uni-black: var(--iv-appearance-page-bg);
  --iv-strong-bg: #131313;
  --iv-banner-bg: #131313;
  --iv-accent-text: #de7441;
  --iv-appearance-accent-bg: #de7441;
  --iv-appearance-field-bg: #2a2a2a;
  --iv-appearance-field-text: #f9f9f9;
  --iv-appearance-placeholder: #a5a5a5;
  --iv-appearance-finder-bg: #a5a5a5;
  --iv-appearance-finder-text: #242220;
  --iv-appearance-finder-accent: #642811;
  --iv-appearance-record-bg: #2a2a2a;
  --iv-appearance-record-text: #f9f9f9;
  --iv-appearance-record-accent: #de7441;
  --iv-appearance-on-accent: #242220;
  --iv-on-party: var(--iv-dark);
}

/* Keep moving surfaces separate from their foregrounds. The component-specific
 * rules remain harmless on IV families that do not contain these components.
 */
:root[data-appearance-scale]
  body
  .iv-global-banner.iv-site-header
  .iv-header-actions
  > .iv-donate-link {
  border-color: var(--iv-appearance-accent-bg) !important;
  background: var(--iv-appearance-accent-bg) !important;
  color: var(--iv-appearance-on-accent) !important;
}

/* Fixed orange fills need a fixed foreground while the surrounding paper and
 * ink move through the grayscale. This changes text only; every orange fill is
 * still owned by its existing component stylesheet.
 */
:root[data-appearance-scale] mark,
:root[data-appearance-scale] .orange_links,
:root[data-appearance-scale] .site-auth-access-modal__button--primary,
:root[data-appearance-scale] .site-auth-preview-lock__button,
:root[data-appearance-scale] .dd_button.selected,
:root[data-appearance-scale] .state_nav_span,
:root[data-appearance-scale] .cta-btn,
:root[data-appearance-scale] .credits-link,
:root[data-appearance-scale] #state-district-result,
:root[data-appearance-scale]
  .iv-page
  .iv-focused-routes
  > a.is-featured:hover,
:root[data-appearance-scale] .iv-page .iv-state-showcase-panel-link,
:root[data-appearance-scale] .iv-page #state-showcase-link,
:root[data-appearance-scale]
  body
  .iv-global-banner.iv-site-header
  .atlas-home-send,
:root[data-appearance-scale] body .iv-command-hud,
:root[data-appearance-scale] .iv-donor-search button,
:root[data-appearance-scale] .iv-donor-map-mode[aria-pressed="true"],
:root[data-appearance-scale]
  .iv-district-summary
  .iv-demographic-focus-close,
:root[data-appearance-scale] .iv-vote-detail-back a,
:root[data-appearance-scale] .iv-vote-load-error-message {
  color: var(--iv-appearance-on-accent) !important;
}

:root[data-appearance-scale] :is(.orange_links, .cta-btn):hover {
  color: var(--iv-ink) !important;
}

:root[data-appearance-scale]
  body
  .iv-global-banner.iv-site-header
  .atlas-home-send:hover {
  color: var(--iv-inverse-bg) !important;
}

:root[data-appearance-scale]
  .iv-page
  .iv-state-showcase-panel-link:hover,
:root[data-appearance-scale] .iv-page #state-showcase-link:hover,
:root[data-appearance-scale] .iv-vote-detail-back a:hover {
  color: var(--iv-paper) !important;
}

:root[data-appearance-scale] .iv-page .iv-home-record {
  border-top-color: var(--iv-appearance-record-text);
  background: var(--iv-appearance-record-bg);
  color: var(--iv-appearance-record-text);
}

:root[data-appearance-scale]
  .iv-page
  .iv-home-record
  :is(
    .iv-home-record-heading h2,
    .iv-home-record-kicker,
    .iv-home-record-stats span,
    .iv-home-citations-label,
    .iv-home-citation-site
  ) {
  color: var(--iv-appearance-record-text);
}

:root[data-appearance-scale]
  .iv-page
  .iv-home-record
  .iv-home-record-stats
  strong {
  color: var(--iv-appearance-record-accent);
}

:root[data-appearance-scale] .iv-page #district-finder-shell {
  border-color: var(--iv-appearance-finder-text);
  background: var(--iv-appearance-finder-bg);
  color: var(--iv-appearance-finder-text);
}

:root[data-appearance-scale]
  .iv-page
  #district-finder-shell
  :is(
    #iv-district-finder-title,
    #iv-district-finder-p,
    .iv-district-finder-form label > span,
    .iv-district-finder-status
  ) {
  color: var(--iv-appearance-finder-text) !important;
}

:root[data-appearance-scale]
  .iv-page
  #district-finder-shell
  :is(.iv-district-finder-result, .iv-district-finder-noscript) {
  color: var(--iv-appearance-finder-accent);
}

:root[data-appearance-scale]
  .iv-page
  #district-finder-shell
  :is(.iv-district-finder-result, .iv-district-finder-noscript):is(
    :hover,
    :focus-visible
  ) {
  color: var(--iv-appearance-finder-text);
}

:root[data-appearance-scale]
  .iv-page
  #district-finder-shell
  :is(.iv-district-finder-form input, .iv-district-finder-form select) {
  border-color: var(--iv-appearance-field-text);
  background: var(--iv-appearance-field-bg);
  color: var(--iv-appearance-field-text);
}

:root[data-appearance-scale]
  .iv-page
  #district-finder-shell
  .iv-district-finder-form
  input::placeholder {
  color: var(--iv-appearance-placeholder);
  opacity: 1;
}

body .iv-global-banner.iv-site-header .iv-appearance-scale[hidden] {
  display: none !important;
}

body .iv-global-banner.iv-site-header .iv-appearance-scale {
  display: grid;
  gap: 12px;
  padding: 15px 16px 17px;
  border-bottom: 1px solid var(--iv-banner-rule);
  background: var(--iv-banner-bg);
  color: var(--iv-ink);
}

body .iv-global-banner.iv-site-header .iv-appearance-scale-head,
body .iv-global-banner.iv-site-header .iv-appearance-scale-range-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--iv-font-mono);
}

body .iv-global-banner.iv-site-header .iv-appearance-scale-head {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

body .iv-global-banner.iv-site-header .iv-appearance-scale-value {
  color: var(--iv-ink);
  font: inherit;
}

body .iv-global-banner.iv-site-header .iv-appearance-scale-segments {
  display: grid;
  grid-template-columns: repeat(6, minmax(42px, 1fr));
  gap: 1px;
  padding: 1px;
  border: 1px solid var(--iv-ink);
  background: var(--iv-ink);
}

body .iv-global-banner.iv-site-header .iv-appearance-scale-option {
  position: relative;
  z-index: 0;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 54px;
  margin: 0;
  padding: 8px 4px;
  border: 0;
  border-radius: 0;
  background: var(--appearance-swatch);
  color: var(--appearance-swatch-ink);
  appearance: none;
  cursor: pointer;
  transition: filter 140ms ease;
}

body .iv-global-banner.iv-site-header .iv-appearance-celestial {
  display: block;
  width: 27px;
  height: 27px;
  overflow: visible;
  color: currentColor;
}

body .iv-global-banner.iv-site-header .iv-appearance-celestial-stroke {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

body .iv-global-banner.iv-site-header .iv-appearance-celestial-fill {
  fill: currentColor;
}

body .iv-global-banner.iv-site-header .iv-appearance-celestial-cutout {
  fill: var(--appearance-swatch);
}

body
  .iv-global-banner.iv-site-header
  .iv-appearance-scale-option:is(:hover, [aria-checked="true"]) {
  filter: saturate(1.08) brightness(1.04);
}

body
  .iv-global-banner.iv-site-header
  .iv-appearance-scale-option[aria-checked="true"] {
  z-index: 1;
  box-shadow:
    inset 0 -4px 0 var(--iv-orange),
    inset 0 0 0 2px currentColor;
}

body
  .iv-global-banner.iv-site-header
  .iv-appearance-scale-option:focus-visible {
  z-index: 2;
  outline: 3px solid var(--iv-focus-orange-ring);
  outline-offset: 2px;
}

body .iv-global-banner.iv-site-header .iv-appearance-scale-range-labels {
  color: var(--iv-neutral);
  font-size: 10px;
  font-weight: 650;
}

body
  .iv-global-banner.iv-site-header
  .iv-banner-menu-theme
  #menu-theme-toggle[data-appearance-scale-trigger] {
  gap: 8px;
}

body
  .iv-global-banner.iv-site-header
  #menu-theme-toggle[data-appearance-scale-trigger]
  .iv-appearance-celestial {
  width: 18px;
  height: 18px;
}

body
  .iv-global-banner.iv-site-header
  #menu-theme-toggle[data-appearance-scale-trigger]
  .iv-appearance-scale-trigger-arrow {
  font-size: 12px;
  transition: transform 140ms ease;
}

body
  .iv-global-banner.iv-site-header
  #menu-theme-toggle[data-appearance-scale-trigger][aria-expanded="true"]
  .iv-appearance-scale-trigger-arrow {
  transform: rotate(180deg);
}

.iv-appearance-scale-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

@media (max-width: 520px) {
  body .iv-global-banner.iv-site-header .iv-appearance-scale-segments {
    grid-template-columns: repeat(6, minmax(42px, 1fr));
  }

  body .iv-global-banner.iv-site-header .iv-appearance-scale-option {
    min-height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .iv-global-banner.iv-site-header .iv-appearance-scale-option,
  body
    .iv-global-banner.iv-site-header
    #menu-theme-toggle[data-appearance-scale-trigger]
    .iv-appearance-scale-trigger-arrow {
    transition: none;
  }
}