/* The 3Y List — search UI. Prefixed so it does not fight styles.css. search1 2026-08-16 */

.ylist-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: auto;
}

.ylist-search__vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ylist-search__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--line-steel);
  border-radius: var(--radius);
  background: rgba(126, 163, 189, 0.08);
  color: var(--ink);
  cursor: pointer;
}

.ylist-search__toggle:hover,
.ylist-search__toggle[aria-expanded="true"] {
  border-color: var(--steel);
  color: var(--steel);
}

.ylist-search__toggle:focus-visible,
.ylist-search__input:focus-visible,
.ylist-search__close:focus-visible,
.ylist-search__option:focus-visible,
.search-page button:focus-visible,
.search-page a:focus-visible,
.search-page input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.ylist-search__icon {
  display: flex;
}

.ylist-search__panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 40;
  width: min(28rem, calc(100vw - 2rem));
  padding: 0.55rem;
  border: 1px solid var(--line-steel);
  background: var(--bg-2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.ylist-search__form {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.ylist-search__input {
  flex: 1;
  min-height: 44px;
  width: 100%;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line-steel);
  border-radius: var(--radius);
  background: rgba(11, 16, 24, 0.7);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
}

.ylist-search__input::placeholder {
  color: var(--muted);
}

.ylist-search__close {
  display: none;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.7rem;
  border: 1px solid var(--line-steel);
  background: transparent;
  color: var(--ink);
  font-family: var(--body);
  font-weight: 700;
  cursor: pointer;
}

.ylist-search__list {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
  max-height: 22rem;
  overflow: auto;
}

.ylist-search__group-label {
  margin: 0.45rem 0 0.15rem;
  padding: 0.15rem 0.4rem;
  color: var(--steel);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ylist-search__option {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.45rem 0.5rem;
  min-height: 44px;
  border-radius: var(--radius);
  cursor: pointer;
}

.ylist-search__option.is-active,
.ylist-search__option:hover {
  background: rgba(126, 163, 189, 0.14);
}

.ylist-search__opt-name {
  color: var(--ink);
  font-weight: 700;
}

.ylist-search__opt-meta {
  color: var(--muted);
  font-size: 0.82rem;
}

@media (max-width: 720px) {
  html.is-search-open {
    overflow: hidden;
  }

  html.is-search-open .ylist-search__panel {
    position: fixed;
    inset: 0;
    z-index: 80;
    width: 100%;
    padding: 1rem 1rem 1.5rem;
    border: 0;
    background: var(--bg);
    box-shadow: none;
  }

  html.is-search-open .ylist-search__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  html.is-search-open .ylist-search__list {
    max-height: calc(100vh - 6rem);
  }

  .ylist-search__toggle {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Results page */

.search-page {
  padding: 2rem 0 3rem;
}

.search-page h1 {
  font-family: var(--display);
  font-size: 2.1rem;
  margin: 0 0 0.4rem;
}

.search-page__car {
  margin: 0 0 1rem;
  color: var(--muted);
}

.search-page__car a {
  margin-left: 0.6rem;
}

.search-page__form {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.search-page__input {
  flex: 1;
  min-height: 44px;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--line-steel);
  border-radius: var(--radius);
  background: rgba(16, 20, 32, 0.92);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.05rem;
}

.search-page__go {
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid #8aafc6;
  border-radius: var(--radius);
  background: var(--steel);
  color: #0b1018;
  font-family: var(--body);
  font-weight: 700;
  cursor: pointer;
}

.search-page__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.25rem;
}

.search-page__filters button {
  min-height: 44px;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line-steel);
  background: transparent;
  color: var(--ink);
  font-family: var(--body);
  font-weight: 700;
  cursor: pointer;
}

.search-page__filters button[aria-pressed="true"] {
  border-color: var(--steel);
  background: rgba(126, 163, 189, 0.14);
  color: var(--steel);
}

.search-page__group {
  margin: 0 0 1.6rem;
}

.search-page__group-title {
  margin: 0 0 0.55rem;
  color: var(--steel);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.search-page__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.search-page__card {
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line);
  background: var(--card);
}

.search-page__title {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.search-page__title:hover {
  color: var(--steel);
}

.search-page__meta,
.search-page__links {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.search-page__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.search-page__fit {
  display: inline-block;
  margin: 0.4rem 0 0;
  padding: 0.12rem 0.42rem;
  border: 1px solid var(--line-steel);
  font-size: 0.72rem;
  font-weight: 700;
}

.search-page__fit.is-yes {
  color: var(--steel);
  background: rgba(126, 163, 189, 0.1);
}

.search-page__fit.is-no {
  color: var(--rose);
  background: transparent;
}

.search-page__zero {
  margin: 1.2rem 0;
}

.search-page__zero h2 {
  font-family: var(--display);
  margin: 0 0 0.4rem;
}

.search-report {
  padding: 2rem 0 3rem;
}

.search-report h1 {
  font-family: var(--display);
}

.search-report .lede {
  color: var(--muted);
}

.search-report ul {
  padding-left: 1.1rem;
}