/* Picking a Pokémon, and the recent list shared with the drill. */

.pick {
  display: grid;
  gap: var(--space-16);
}

.pick__header {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-16);
}

.pick__search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-10);
  align-items: end;
}

.pick__list {
  padding: var(--space-4) var(--space-16);
  list-style: none;
}

.pick__list li + li {
  border-top: 1px solid var(--line);
}

.pick__item {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: var(--space-10);
  min-height: var(--target);
  padding: var(--space-10) 0;
  color: var(--ink);
  text-decoration: none;
}

.pick__rank { grid-row: span 2; align-self: center; }
.pick__name { font-weight: 600; }

.recent {
  display: grid;
  gap: var(--space-10);
}

.recent__list {
  display: grid;
  gap: var(--space-10);
}

.recent__item {
  display: grid;
  min-height: var(--target);
  padding: var(--space-10) var(--space-14);
  border-radius: var(--radius-control);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
}

.recent__name { font-weight: 600; }
.recent__item .muted { color: var(--muted); }

/* Loading: the results frame hides and skeleton rows show in its place. */
.pick__loading {
  display: none;
}

.pick__results[busy] {
  display: none;
}

.pick__results[busy] + .pick__loading {
  display: block;
}

.pick__results {
  display: grid;
  gap: var(--space-14);
}