/*
  B3 tâche 061 — AC44.2. Le menu d'autocomplétion (`.tss-*`) de la surface de
  recherche unifiée. La bande d'onglets (`.uss-*`) est retirée le 06/10
  (#4460, #4495) : la barre de navigation mène aux deux contenus.

  Deux composants, une seule feuille : ils vivent ensemble en tête de chacun des
  quatre onglets (recruteur Talents / Experts, talent Offres / Maisons) et ne
  servent nulle part ailleurs. Aucun doré en dur : les jetons de
  design_tokens.css, et eux seuls.

  Mobile (R3-MOB.20 / R3-MOB.30) : la bande passe à la ligne sous 480 px plutôt
  que de défiler, et le menu de suggestions occupe toute la largeur de la barre.
*/

/* ─── Autocomplétion ──────────────────────────────────────────────────────── */

/* La barre de recherche devient le repère du menu. `relative` seul ne déplace
   rien : la géométrie de la maquette est inchangée. */
.tss-host {
  position: relative;
}

.tss-frame {
  display: block;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
}

/* Un cadre vide n'a ni fond ni ombre : tant qu'on n'a rien tapé, rien ne
   s'affiche sous la barre. */
.tss-frame:empty {
  display: none;
}

.tss-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  background: #FFFFFF;
  border: 1px solid var(--gold-200);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(10, 10, 10, .10);
  max-height: 320px;
  overflow-y: auto;
  text-align: left;
}

.tss-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 10px;
  color: #1A1A1A;
  font-size: 14px;
  text-decoration: none;
}

.tss-item:hover,
.tss-item:focus-visible {
  background: var(--gold-50);
}

.tss-item-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tss-item-kind {
  flex: none;
  color: var(--gold-600);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tss-empty {
  margin: 0;
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1px solid var(--gold-200);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(10, 10, 10, .10);
  color: #5B5B5B;
  font-size: 13px;
  text-align: left;
}