/* ============================================================
   Raccourcis "habituels"

   Chips en un tap listant les descriptions les plus saisies pour un type de
   repas (source : GET /api/foods/frequent).

   Utilisé à deux endroits, d'où ce fichier partagé plutôt qu'un bloc dans
   today.css :
     - carte Repas de la vue Today, indexée sur le créneau horaire courant
     - sheet d'ajout de repas, indexée sur le type de repas sélectionné
       (seul chemin disponible pour une saisie en retard ou sur un jour passé)
   ============================================================ */

.meal-quick {
    margin-top: var(--space-4);
}

.meal-quick[hidden] {
    display: none;
}

.meal-quick__label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.meal-quick__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.meal-quick__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    /* min-width: 0 sur un flex item pour que l'ellipsis du libellé puisse jouer */
    min-width: 0;
    max-width: 100%;
    padding: var(--space-2) var(--space-3);
    font-family: inherit;
    font-size: 13px;
    color: var(--accent-text);
    background: var(--accent-soft);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.meal-quick__chip:hover {
    border-color: var(--accent);
}

.meal-quick__chip:active {
    background: var(--surface-alt);
}

.meal-quick__chip-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meal-quick__chip-cal {
    font-weight: 700;
    flex-shrink: 0;
    opacity: 0.75;
}

/* Dans la sheet d'ajout, le bloc s'insère entre deux champs de formulaire :
   il ne porte donc pas la marge haute prévue pour la carte Repas, l'espacement
   étant déjà assuré par le `gap` de `.stack`. */
.meal-quick--field {
    margin-top: 0;
}