/* Liste de suggestions de la recherche stats, avatars de club et bulles
   (marque SpotXI, nation) : partagés par les pages stats et l'accueil du site. */

.st-suggest {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  inset-inline: 0;
  max-height: min(440px, 60vh);
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--borderStrong);
  border-radius: 16px;
  background: var(--canvas);
  box-shadow: var(--shadow);
  list-style: none;
  /* Pas de barre native, jamais de défilement horizontal (comme les panneaux stats). */
  overflow-x: hidden;
  scrollbar-width: none;
}
.st-suggest::-webkit-scrollbar {
  display: none;
}
/* Le bord qui cache encore des suggestions s'estompe (`data-edge`, posé par suggest.js). */
.st-suggest::before,
.st-suggest::after {
  content: '';
  position: sticky;
  z-index: 3;
  display: none;
  height: 40px;
  pointer-events: none;
}
.st-suggest::before {
  top: 0;
  margin-bottom: -40px;
  background: linear-gradient(var(--canvas), transparent);
}
.st-suggest::after {
  bottom: 0;
  margin-top: -40px;
  background: linear-gradient(transparent, var(--canvas));
}
.st-suggest[data-edge~='top']::before,
.st-suggest[data-edge~='bottom']::after {
  display: block;
}
.st-suggest li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 52px;
  padding: 6px 10px;
  border-radius: 12px;
  cursor: pointer;
}
.st-suggest li[data-kind='player'] {
  grid-template-columns: minmax(0, 1fr) auto;
}
.st-suggest li[data-kind='player'].has-photo {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.st-suggest li[aria-selected='true'] {
  background: var(--surface);
}
.st-suggest-name {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
  font-weight: 700;
}
/* Le pseudo se tronque, le drapeau de sa nation reste visible. */
.st-suggest-name bdi {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-suggest-flag {
  flex: none;
  border-radius: 2px;
  outline: 1px solid var(--border);
  outline-offset: -1px;
}
.st-suggest-meta {
  display: block;
  color: var(--text2);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
}
.st-suggest mark {
  background: transparent;
  color: var(--actionText);
}
.st-suggest-empty {
  padding: 14px 12px;
  color: var(--text2);
  font-size: var(--fs-small);
}

.st-avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--raised);
  color: var(--text);
  font-family: var(--mono);
  font-weight: 700;
}
/* Club : carré à angles `radius.md` sur fond relevé, comme `ClubLogoAvatar`.
   Un joueur d'archive n'a pas de visage : aucun avatar joueur, sauf la photo
   SpotXI d'un joueur rattaché, dans un rond comme `Avatar`. */
.st-avatar.is-club {
  position: relative;
}
.st-avatar.is-player {
  overflow: hidden;
  border-radius: 50%;
  background: var(--canvas);
}
/* Écusson du club SpotXI ancré : il remplit le cadre, sans le déborder. */
.st-avatar.has-logo {
  background: var(--canvas);
}
.st-avatar-logo {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}
/* Pays : disque au coin (36 % du cadre), cerclé du fond, comme `ClubAvatar`. */
.st-avatar-flag {
  position: absolute;
  inset-inline-end: -1px;
  bottom: -1px;
  width: 36%;
  aspect-ratio: 1;
  border: 2px solid var(--canvas);
  border-radius: 50%;
  object-fit: cover;
}
.st-avatar-sm .st-avatar-flag {
  border-width: 1.5px;
}
.st-avatar-xs {
  width: 26px;
  height: 26px;
  font-size: 0.4375rem;
}
.st-avatar-xs .st-avatar-flag {
  border-width: 1px;
}
.st-avatar-sm {
  width: 38px;
  height: 38px;
  font-size: 0.6875rem;
}
.st-avatar-lg {
  width: 56px;
  height: 56px;
  font-size: 0.9375rem;
}
/* Badge « Sur SpotXI » d'une ligne de liste : le favicon du kit (imposé sous
   24 px), avec la même bulle que les barres de forme. Le sens est aussi dans le
   texte masqué du lien, pour le clavier tactile et les lecteurs d'écran. */
.st-mark {
  position: relative;
  display: inline-flex;
  flex: none;
  vertical-align: -3px;
}
.st-mark img {
  display: block;
  width: 16px;
  height: 16px;
}
.st-mark::after,
.st-flag::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 3;
  bottom: calc(100% + 6px);
  left: 50%;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--text);
  color: var(--canvas);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  translate: -50% 4px;
  pointer-events: none;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    translate var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .st-mark:hover::after,
  .st-flag:hover::after {
    opacity: 1;
    translate: -50% 0;
  }
}
/* Au clavier, une seule bulle : la marque SpotXI si la ligne en porte une,
   sinon la nation. */
a:focus-visible:not(:has(.st-mark)) .st-flag::after,
a:focus-visible .st-mark::after {
  opacity: 1;
  translate: -50% 0;
}
/* La liste de suggestions défile : la bulle s'ouvre sur le côté, jamais au bord. */
.st-suggest .st-mark::after {
  top: 50%;
  bottom: auto;
  left: auto;
  inset-inline-end: calc(100% + 8px);
  translate: 4px -50%;
}
@media (hover: hover) {
  .st-suggest .st-mark:hover::after {
    translate: 0 -50%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .st-mark::after,
  .st-flag::after {
    transition: none;
  }
}