#searchFeedSectionView .voice-search-shell {
  z-index: 10;
}

#searchFeedSectionView .civic-search-results[hidden],
#searchFeedSectionView .civic-search-results__acts[hidden],
#searchFeedSectionView .civic-search-results__empty[hidden] {
  display: none !important;
}

#searchFeedSectionView .civic-search-results {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  left: 0;
  z-index: 20;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-12px) scale(.992);
  transform-origin: top center;
  pointer-events: none;
  overflow: hidden;
  border-radius: 24px;
  transition: grid-template-rows 420ms cubic-bezier(.2, .82, .2, 1), opacity 220ms ease, transform 420ms cubic-bezier(.2, .82, .2, 1);
}

#searchFeedSectionView .civic-search-results.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

#searchFeedSectionView .civic-search-results__clip {
  min-height: 0;
  overflow: hidden;
  border-radius: inherit;
  background: transparent;
}

#searchFeedSectionView .civic-search-results__panel {
  max-height: min(76vh, 760px);
  overflow: auto;
  border: 1px solid rgba(220, 222, 239, .95);
  border-radius: 24px;
  background: rgba(255, 255, 255, .97);
  background-clip: padding-box;
  box-shadow: 0 24px 70px rgba(44, 38, 98, .18);
  backdrop-filter: blur(22px);
  scrollbar-width: thin;
  scrollbar-color: #d8d8ea transparent;
}

#searchFeedSectionView .civic-search-results__content {
  padding: 20px;
}

#searchFeedSectionView .civic-search-results__topline,
#searchFeedSectionView .civic-search-results__section-heading,
#searchFeedSectionView .civic-search-results__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#searchFeedSectionView .civic-search-results__topline {
  padding: 2px 2px 17px;
  color: #747b95;
  font-size: 13px;
}

#searchFeedSectionView .civic-search-results__topline strong {
  color: #18213f;
  font-weight: 750;
}

#searchFeedSectionView .civic-search-results__close {
  padding: 7px 11px;
  border: 0;
  border-radius: 999px;
  color: #737990;
  background: #f2f3fa;
  cursor: pointer;
}

#searchFeedSectionView .civic-search-results__close:hover,
#searchFeedSectionView .civic-search-results__close:focus-visible {
  color: #6256d9;
  outline: 3px solid rgba(118, 103, 255, .12);
  outline-offset: 2px;
}

#searchFeedSectionView .civic-search-results__section + .civic-search-results__section {
  margin-top: 22px;
}

/* PEOPLE results render inside #civicSearchAccountResults (filled in asynchronously after the
   account search resolves), so the sibling rule above never matches across it - that div has no
   .civic-search-results__section class of its own, and the PEOPLE <section> is nested a level
   inside it rather than a direct sibling of POLITICIANS/ACTS. These two rules give the Search-page
   section rhythm (POLITICIANS -> PEOPLE -> ACTS) its own spacing instead. :not(:empty) keeps the
   slot from adding a gap before results load or when a query has no matching accounts. */
#searchFeedSectionView .civic-search-results__section + #civicSearchAccountResults:not(:empty) {
  margin-top: 15px;
}

#searchFeedSectionView #civicSearchAccountResults + .civic-search-results__section {
  margin-top: 18px;
}

#searchFeedSectionView .civic-search-results__section-heading {
  margin: 0 2px 11px;
}

#searchFeedSectionView .civic-search-results__section-heading h2 {
  margin: 0;
  color: #18213f;
  font-size: 12px;
  letter-spacing: .085em;
  text-transform: uppercase;
}

#searchFeedSectionView .civic-search-results__section-heading a,
#searchFeedSectionView .civic-search-results__more {
  color: #6e61e9;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

/* Card design itself (the .politics-native-act-summary-card* rules in insta.html) is shared with
   Politics - act-summary-card.js renders those exact classes here, so it is not redefined in this
   file. This grid only controls how many of those cards fit per row in the Search results area;
   minmax's lower bound matches the card's own natural (Politics) width so Search never squeezes
   it smaller just to force a fixed column count, and auto-fill lets the column count adapt to
   however wide the results panel is instead of a fixed breakpoint list. */
#searchFeedSectionView .civic-search-results__acts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

#searchFeedSectionView .civic-search-results__standard {
  overflow: hidden;
  border: 1px solid #e5e7f3;
  border-radius: 17px;
  background: #fff;
}

#searchFeedSectionView .civic-search-result {
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 72px;
  padding: 12px 14px;
  color: inherit;
  text-decoration: none;
  transition: background 160ms ease;
}

#searchFeedSectionView .civic-search-result + .civic-search-result {
  border-top: 1px solid #eceef6;
}

#searchFeedSectionView .civic-search-result:hover {
  background: #fafaff;
}

#searchFeedSectionView .civic-search-result__icon,
#searchFeedSectionView .civic-search-result__thumbnail {
  display: grid;
  width: 45px;
  height: 45px;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  background: #f0efff;
  color: #7667ff;
}

#searchFeedSectionView .civic-search-result__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#searchFeedSectionView .civic-search-result__copy {
  min-width: 0;
}

#searchFeedSectionView .civic-search-result__title,
#searchFeedSectionView .civic-search-result__meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#searchFeedSectionView .civic-search-result__title {
  margin-bottom: 4px;
  color: #202844;
  font-size: 14px;
  font-weight: 780;
}

#searchFeedSectionView .civic-search-result__meta {
  color: #747b95;
  font-size: 12px;
  line-height: 1.35;
}

#searchFeedSectionView .civic-search-result__arrow {
  color: #7265e8;
  font-size: 20px;
  text-decoration: none;
}

#searchFeedSectionView .civic-search-results__more {
  justify-content: flex-start;
  margin-top: 15px;
  padding: 13px 14px;
  border-radius: 14px;
  background: #f8f7ff;
}

#searchFeedSectionView .civic-search-results__empty {
  padding: 38px 18px;
  color: #747b95;
  text-align: center;
}

@media (max-width: 620px) {
  #searchFeedSectionView .civic-search-results__panel { max-height: calc(100vh - 120px); border-radius: 20px; }
  #searchFeedSectionView .civic-search-results__content { padding: 16px; }
  #searchFeedSectionView .civic-search-results__topline { align-items: flex-start; flex-direction: column; gap: 8px; }
  #searchFeedSectionView .civic-search-result { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; }
  #searchFeedSectionView .civic-search-result__icon,
  #searchFeedSectionView .civic-search-result__thumbnail { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  #searchFeedSectionView .civic-search-results { transition: none; }
}