/* Shared hover and compact behavior for the homepage, House, and Senate forecast arcs. */
@media (hover: hover) and (pointer: fine), (any-hover: hover) and (any-pointer: fine) {
  html body[class] #cmep-house-arc-native .seat:hover,
  html body[class] #cmep-senate-arc-native .seat:hover {
    transform: scale(1.06);
    filter: drop-shadow(0 0 7px rgba(15, 23, 42, .18));
  }
}

@media (max-width: 820px), (hover: none), (pointer: coarse) {
  html body[class] :is(#cmep-house-arc-native, #cmep-senate-arc-native) .arc-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 10px !important;
  }

  html body[class] :is(#cmep-house-arc-native, #cmep-senate-arc-native) .arc-wrap > svg {
    display: block !important;
    width: min(100%, 360px) !important;
    max-width: 360px !important;
    height: auto !important;
    aspect-ratio: 360 / 295 !important;
    margin-inline: auto !important;
  }

  html body[class] #cmep-senate-arc-native #arc-svg {
    width: min(100%, 360px) !important;
    max-width: 360px !important;
    height: auto !important;
    aspect-ratio: 360 / 295 !important;
    margin-inline: auto !important;
  }

  html body[class] :is(#cmep-house-arc-native, #cmep-senate-arc-native)
    :where(#path-controls, #cmep-house-arc-path-controls) {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 20px 0 10px !important;
    padding: 0 !important;
    transform: none !important;
  }


  html body[class] #cmep-house-arc-native #cmep-house-arc-path-controls,
  html body[class] #cmep-senate-arc-native #path-controls {
    width: 100% !important;
    margin: 20px 0 10px !important;
  }

  html body[class] :is(#cmep-house-arc-native, #cmep-senate-arc-native) .path-button {
    width: 84px !important;
    height: 84px !important;
    flex: 0 0 84px !important;
    max-width: 84px !important;
    padding: .48rem .72rem !important;
    font-size: .78rem !important;
    line-height: 1.05 !important;
  }

  html body[class] :is(#cmep-house-arc-native, #cmep-senate-arc-native) .mobile-path-majority.show {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body[class] :is(#cmep-house-arc-native, #cmep-senate-arc-native) .mobile-path-dots {
    box-sizing: border-box !important;
    align-items: flex-end !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 0 14px !important;
    padding: 8px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    touch-action: pan-x !important;
  }

  html body[class] :is(#cmep-house-arc-native, #cmep-senate-arc-native) .mobile-path-cards {
    box-sizing: border-box !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 14px 12px 18px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    scroll-padding-inline: 12px !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    touch-action: pan-x !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body[class] :is(#cmep-house-arc-native, #cmep-senate-arc-native) .mobile-path-cards::-webkit-scrollbar,
  html body[class] :is(#cmep-house-arc-native, #cmep-senate-arc-native) .mobile-path-dots::-webkit-scrollbar {
    display: none !important;
  }

  html body[class] :is(#cmep-house-arc-native, #cmep-senate-arc-native) .mobile-path-card {
    box-sizing: border-box !important;
    flex: 0 0 min(320px, calc(100vw - 32px)) !important;
    width: min(320px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    scroll-snap-align: center !important;
  }

  html body[class].cmep-enhanced :is(#cmep-house-arc-native, #cmep-senate-arc-native) .mobile-path-card {
    flex-basis: min(320px, calc(100vw - 32px)) !important;
    width: min(320px, calc(100vw - 32px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(#cmep-house-arc-native, #cmep-senate-arc-native) *,
  :where(#cmep-house-arc-native, #cmep-senate-arc-native) *::before,
  :where(#cmep-house-arc-native, #cmep-senate-arc-native) *::after {
    scroll-behavior: auto !important;
  }

  :where(#cmep-house-arc-native, #cmep-senate-arc-native) .seat,
  :where(#cmep-house-arc-native, #cmep-senate-arc-native) .path-banner,
  :where(#cmep-house-arc-native, #cmep-senate-arc-native) .mobile-path-dot {
    transition: none !important;
    animation: none !important;
  }

  :where(#cmep-house-arc-native, #cmep-senate-arc-native) .seat:hover {
    transform: none !important;
    filter: none !important;
  }
}