/*
 * Ce qui se corrige là où il se lit : la référence du geste, pour toute l'application.
 *
 * **Une seule feuille, parce qu'un même geste se dessine d'une seule façon.** Le crayon d'une
 * fiche et celui d'une cellule de tableau ont vécu chacun dans leur coin, et ont divergé : une
 * pastille pleine d'un côté, un trait gris de l'autre. Rien ne les reliait, et rien n'empêchait
 * le troisième écran d'en inventer un troisième.
 *
 * Ce qui est commun se décide ici — le dessin, la teinte, la zone qu'on vise au doigt. Ce qui ne
 * peut pas l'être reste chez chacun, parce que la structure diffère vraiment :
 *
 *   - sur une fiche, la ZONE DE LECTURE est le bouton et le crayon n'est qu'un dessin posé
 *     par-dessus ; il se révèle au survol de la boîte du champ ;
 *   - dans un tableau, le CRAYON est le bouton — c'est lui que la tabulation atteint et qui porte
 *     l'intitulé du lecteur d'écran ; il se révèle au survol de la rangée entière, sans quoi
 *     traverser une ligne l'allumerait colonne après colonne.
 *
 * Ces deux règles-là vivent donc dans `sheet.css` et `table.css`, et n'y décident que du moment.
 */

/*
 * Le crayon : une pastille pleine, révélée quand on approche.
 *
 * **Une pastille, et pas seulement une couleur.** Coloré mais nu, le crayon reste un trait fin de
 * quatorze pixels : il se lit comme une poussière plutôt que comme une commande. Ce qui lui
 * manque n'est pas la teinte mais le poids — un fond lui donne une surface, et le fait lire comme
 * quelque chose qu'on peut viser.
 *
 * **Pleine, et c'est la troisième tentative.** Gris, il se confondait avec la marque d'origine
 * d'un document. Coloré mais nu, il ne se voyait pas. Sur un fond `accent-soft`, il disparaissait
 * pour une autre raison : cette teinte et le fond de survol d'une ligne ne sont séparés que de
 * trois points de luminosité.
 *
 * La couleur d'accent est celle de tout ce qui s'actionne dans le produit — elle dit « ceci se
 * clique » sans qu'on ait à l'apprendre.
 */
.edit-pen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: var(--app-space-xs);
    border: 0;
    border-radius: var(--app-radius-pill);
    background: var(--app-accent);
    color: var(--app-on-accent);
    font-size: var(--app-text-sm);
    cursor: pointer;
    /* Transparent et non retiré : la place reste prise, et rien ne saute quand il paraît. */
    opacity: 0;
    transition: opacity 150ms var(--app-ease);
}

/*
 * Au toucher il n'y a pas de survol : le crayon resterait invisible et pourtant atteignable. Il se
 * montre alors en retrait, partout — une fiche ouverte sur un téléphone ne disait rien de ce qui
 * s'y corrige.
 */
@media (hover: none) {
    .edit-pen {
        opacity: .55;
    }
}

/*
 * La saisie ouverte : le fond du survol, et le filet d'accent pour seule différence.
 *
 * **Le même teint des deux côtés.** Une cellule s'ouvrait sur un fond de surface, un champ de
 * fiche sur le fond du survol : deux blancs différents pour un même moment. Celui du survol est
 * celui qu'on garde — la boîte vient de s'éclairer sous le pointeur, et s'ouvrir ne doit pas la
 * rééteindre.
 *
 * Ni ombre ni halo : ils déborderaient de la boîte et la feraient paraître bouger, alors que tout
 * le geste tient à ce que rien ne se déplace sous l'œil.
 */
.edit-input {
    border: 1px solid var(--app-accent);
    border-radius: var(--app-radius-ui);
    background: var(--app-hover);
    color: var(--app-ink);
    font: inherit;
    box-shadow: none;
    outline: none;
}

/* Ce que le serveur a refusé se marque sur le champ qui le porte, et non seulement sous lui. */
.edit-input[aria-invalid] {
    border-color: var(--app-danger);
}