/*
 * Les adresses proposées pendant qu'on écrit un lieu.
 *
 * Le même panneau sert la cellule d'un tableau, le champ d'une fiche et le formulaire d'un
 * rendez-vous : ce qui change d'un endroit à l'autre est la boîte qui l'accueille, jamais la liste
 * elle-même. Une feuille par écran aurait fait diverger trois listes que rien ne distingue.
 */

/*
 * La boîte qui tient le champ et son panneau.
 *
 * `display: contents` là où elle enveloppe une saisie déjà placée par son écran : sans cela, elle
 * s'intercalerait dans la grille de la fiche et décalerait le champ au moment où il s'ouvre. Le
 * panneau, lui, se place par rapport à la cellule ou au champ qui l'entoure, et non par rapport à
 * cette boîte-ci.
 */
.address {
    display: contents;
}

/*
 * La cellule devient le repère du panneau.
 *
 * Le champ d'une fiche a déjà une boîte posée en relatif ; une cellule de tableau n'en a pas, et le
 * panneau irait alors se caler sur la page — sous la liste, loin de ce qu'on écrit. La règle ne
 * vise que les cellules qui proposent des adresses : `position: relative` sans décalage ne déplace
 * rien, mais l'écrire pour toutes les cellules serait payer partout ce qui ne sert qu'ici. Le
 * champ d'un formulaire de réglages est dans le même cas que la cellule.
 */
.table-cell:has(.address),
.activity-form-line:has(.address),
.app-field:has(.address) {
    position: relative;
}

/*
 * Le panneau, posé sous ce qu'on écrit.
 *
 * Il déborde du champ vers la droite : une adresse est plus longue que la colonne qui la montre, et
 * la couper en deux lignes ferait sauter la liste à chaque frappe.
 */
.address-panel {
    position: absolute;
    top: calc(100% + var(--app-space-2xs));
    left: 0;
    z-index: var(--app-z-dropdown);
    width: max(100%, 24rem);
    max-width: calc(100vw - var(--app-space-lg) * 2);
    background: var(--app-surface);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-pop);
    overflow: hidden;
}

.address-hits {
    display: flex;
    flex-direction: column;
    gap: var(--app-space-2xs);
    padding: var(--app-space-2xs);
    max-height: 18rem;
    overflow-y: auto;
}

/*
 * Une proposition. C'est un bouton : elle ne mène nulle part, elle remplit ce qu'on écrit. La
 * largeur entière et le texte à gauche le font ressembler à une ligne de liste plutôt qu'à un
 * bouton de formulaire.
 */
.address-hit {
    display: flex;
    align-items: center;
    gap: var(--app-space-sm);
    width: 100%;
    padding: var(--app-space-xs) var(--app-space-sm);
    border: 0;
    border-radius: var(--app-radius-ui);
    background: transparent;
    color: var(--app-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/*
 * Le survol et la proposition désignée au clavier se peignent pareil : ce sont deux façons de dire
 * la même chose — c'est celle-là qui se posera dans le champ.
 */
.address-hit:hover,
.address-hit[data-active] {
    background: var(--app-hover);
}

.address-hit-icon {
    display: flex;
    flex: 0 0 auto;
    color: var(--app-ink-muted);
}

.address-hit-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: var(--app-leading-tight);
}

/* L'adresse se coupe plutôt qu'elle ne se replie : une ligne par proposition, toujours. */
.address-hit-label,
.address-hit-detail {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.address-hit-detail {
    font-size: var(--app-text-sm);
    color: var(--app-ink-muted);
}