/*
 * La fiche d'une personne, la fiche d'une organisation.
 *
 * La charpente vient de `sheet.css` — les deux colonnes, le titre, les onglets, les champs qui
 * s'ouvrent au clic. Ce qui reste ici n'appartient qu'à l'annuaire : les lignes de coordonnées, et
 * ce qui porte un dessin devant son nom.
 */

/* ═══ Les coordonnées ══════════════════════════════════════════════════════════════════════ */

/*
 * Une ligne : le dessin de la nature, le champ qui se corrige, la croix qui retire.
 *
 * Le champ prend ce qui reste, les deux autres leur largeur propre. Sans cela, un numéro long
 * pousserait la croix hors de la colonne.
 */
.summary-point {
    display: flex;
    align-items: center;
    gap: var(--app-space-xs);
}

.summary-point .field {
    flex: 1 1 auto;
    min-width: 0;
}

.summary-point-kind {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--app-ink-muted);
}

/*
 * La croix ne s'allume qu'au survol de sa ligne : c'est un geste sans retour, et une croix offerte
 * en permanence sous chaque numéro se lit comme une invitation. La mise au point la révèle aussi —
 * sans quoi elle serait la seule commande de la colonne que le clavier ne verrait pas.
 */
.summary-point-remove {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--app-ink-muted);
    cursor: pointer;
    opacity: 0;
}

.summary-point:hover .summary-point-remove,
.summary-point-remove:focus-visible {
    opacity: 1;
}

.summary-point-remove:hover {
    color: var(--app-danger, var(--app-ink));
}

/* Les trois commandes se partagent la largeur, le bouton prend la sienne. */
.summary-point-add {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--app-space-xs);
    margin-top: var(--app-space-sm);
}

.summary-point-add .app-field {
    flex: 1 1 6rem;
    min-width: 0;
}

/* ═══ Ce qui porte un dessin devant son nom ════════════════════════════════════════════════ */

/*
 * Une ligne d'onglet : le dessin de la sorte, puis le nom.
 *
 * Les lignes de la liste écartent leurs deux bouts — le nom d'un côté, la date de l'autre. Le
 * dessin doit donc rester collé au nom, et c'est ce que cette boîte fait : elle les tient
 * ensemble pour que la ligne n'ait que deux extrémités.
 */
.appearance {
    display: inline-flex;
    align-items: center;
    gap: var(--app-space-xs);
    min-width: 0;
}

.appearance-kind {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--app-ink-muted);
}