/*
 * Home page game finder (TS-2888). Tokens only, like components.css.
 * Loaded by home.html. The grid itself reuses .ts-projects.
 */

.ts-finder {
  padding-block: var(--space-6) var(--space-10);
}

.ts-finder__title {
  font-size: var(--text-3xl);
  max-width: 24ch;
}

.ts-finder__lead {
  margin-top: var(--space-2);
  max-width: 40rem;
  color: var(--color-text-2);
}

.ts-finder__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}

/* Search box: icon, input and button in one row. */
.ts-finder__search {
  max-width: 44rem;
}

/* Wide screens: search and the extra filters share one row. The
 * disclosure is open there (home.js), so its summary is hidden. */
@media (min-width: 64rem) {
  .ts-finder__form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    column-gap: var(--space-6);
  }

  .ts-finder__genres {
    grid-column: 1 / -1;
  }

  .ts-finder__more {
    grid-column: 2;
    grid-row: 1;
  }

  .ts-finder__more[open] > .ts-finder__summary {
    display: none;
  }

  .ts-finder__more[open] .ts-finder__selects {
    margin-top: 0;
  }
}

.ts-finder__box {
  position: relative;
  display: flex;
  gap: var(--space-2);
}

.ts-finder__icon {
  position: absolute;
  top: 50%;
  left: var(--space-3);
  transform: translateY(-50%);
  color: var(--color-text-3);
  pointer-events: none;
}

.ts-finder__input {
  flex: 1;
  min-width: 0;
  padding-left: var(--space-10);
}

.ts-finder__input:focus {
  border-color: var(--color-focus);
}

.ts-finder__box .ts-btn {
  min-height: var(--space-12);
}

/* Genre chips: one row that scrolls inside itself on phones, so the
 * grid starts sooner. They wrap from 768 px. */
.ts-finder__genres {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ts-finder__genres legend {
  margin-bottom: var(--space-2);
  padding: 0;
}

.ts-finder__chips {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-block: var(--focus-offset) var(--space-1);
  padding-inline: var(--focus-offset);
  margin-inline: calc(var(--focus-offset) * -1);
  scrollbar-width: thin;
}

@media (min-width: 48rem) {
  .ts-finder__chips {
    flex-wrap: wrap;
    overflow: visible;
  }
}

.ts-finder__chip {
  position: relative;
  flex: none;
}

.ts-finder__chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.ts-finder__chip span {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding-inline: var(--space-4);
  border: var(--border-w-thick) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.ts-finder__chip:hover span {
  border-color: var(--color-brand);
}

.ts-finder__chip input:checked + span {
  border-color: var(--color-brand);
  background: var(--color-brand-tint);
  color: var(--color-brand-ink);
}

.ts-finder__chip input:focus-visible + span {
  outline: var(--focus-w) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

/* More filters: a disclosure on phones, open from 768 px (home.js). */
.ts-finder__summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--color-brand);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.ts-finder__selects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-3) var(--space-4);
  max-width: 44rem;
  margin-top: var(--space-2);
}

/* Chevron on each select, since the reset in app.css removes the
 * native arrow. */
.ts-finder__select {
  position: relative;
  display: block;
}

.ts-finder__select .ts-select {
  padding-right: var(--space-10);
  cursor: pointer;
}

.ts-finder__select .ts-icon {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
  color: var(--color-text-3);
  pointer-events: none;
}

.ts-finder__selects .ts-field + .ts-field {
  margin-top: 0;
}

/* Result bar: heading, live count, clear link. */
.ts-finder__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  margin-top: var(--space-5);
  margin-bottom: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-w) solid var(--color-border);
}

.ts-finder__heading {
  font-size: var(--text-xl);
}

.ts-finder__count {
  color: var(--color-text-3);
  font-size: var(--text-sm);
}

.ts-finder__clear {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  margin-left: auto;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.ts-finder__clear[hidden],
.ts-games li[hidden],
.ts-empty[hidden] {
  display: none;
}

.ts-games .ts-project__thumb img {
  display: block;
}

/* Two lines, so the English name after a Japanese title shows. */
.ts-games .ts-project__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

.ts-games__tags {
  margin-top: var(--space-1);
  color: var(--color-text-2);
  font-size: var(--text-xs);
}

/* The play-by-ID block sits under the grid now; it keeps the hero
 * layout but with section spacing. */
.ts-hero--id {
  padding-block: 0;
}