/* --- search input (used in topbar + filter bar) --- */
.search {
  position: relative;
  max-width: 640px;
  margin-inline: auto;
  width: 100%;

  & .search__icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--color-muted);
    pointer-events: none;
  }

  & input {
    width: 100%;
    border: 1px solid var(--color-rule);
    background: var(--color-bg);
    border-radius: 999px;
    padding: 0.75rem 2.75rem 0.75rem 2.75rem;
    font-size: 1rem;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;

    &::placeholder { color: var(--color-muted); }
    &::-webkit-search-cancel-button,
    &::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
    &:focus {
      border-color: var(--color-fg);
      box-shadow: 0 0 0 4px rgba(15, 23, 42, .06);
    }
  }

  & .search__clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    background: var(--color-bg-soft);
    color: var(--color-muted);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    display: grid;
    place-items: center;

    &:hover { background: var(--color-fg); color: var(--color-bg); }
  }

  /* Shortcut hint chip — hidden once focused or typed-in, hidden on touch. */
  & .search__kbd {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    background: var(--color-bg-soft);
    color: var(--color-muted);
    border: 1px solid var(--color-rule);
    pointer-events: none;
    user-select: none;
    transition: opacity .12s ease;
  }
  &:focus-within .search__kbd,
  &:has(input:not(:placeholder-shown)) .search__kbd {
    opacity: 0;
    visibility: hidden;
  }
}
@media (hover: none), (pointer: coarse) {
  .search__kbd { display: none; }
}

/* --- compact search variant for the topbar --- */
.header-search {
  width: clamp(176px, 22vw, 256px);
  margin-inline: auto;

  & .search { max-width: none; }
  & .search input { padding-block: 0.3rem; padding-inline: 2.25rem; font-size: 0.85rem; }
  & .search__icon { width: 15px; height: 15px; left: 0.75rem; }
  & .search__clear { width: 1.35rem; height: 1.35rem; right: 0.35rem; font-size: 0.95rem; }
}

/* --- filter pill bar (sits under the featured card on archive) --- */
.filters {
  margin: 0.5rem auto 2rem;
  max-width: var(--max-w-content);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pill-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: center;

  @media (max-width: 640px) {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.25rem;
  }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 500;
  font-family: inherit;
  background: var(--color-bg);
  color: var(--color-fg);
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  text-transform: capitalize;
  line-height: 1.2;

  &:hover { border-color: var(--color-fg); }
  &.is-active {
    background: var(--color-fg);
    color: var(--color-bg);
    border-color: var(--color-fg);

    & .pill__count {
      background: rgba(255, 255, 255, 0.15);
      color: var(--color-bg);
    }
  }
  &.is-all { text-transform: none; }

  & .pill__count {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--color-muted);
    background: var(--color-bg-soft);
    border-radius: 999px;
    padding: 0 0.32rem;
    min-width: 1rem;
    text-align: center;
  }

  @media (max-width: 640px) { flex-shrink: 0; }
}

.results-header {
  text-align: center;
  color: var(--color-muted);
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}