/*
 * Les activités : la liste, la ligne de saisie, et la fiche.
 *
 * Une seule feuille pour les trois écrans où elles apparaissent — leur page, la fiche de l'une
 * d'elles, et le cadre d'un projet. Ce qui les distingue tient au contexte, pas au dessin : une
 * ligne d'activité doit se reconnaître d'un endroit à l'autre, et trois feuilles auraient fini
 * par en donner trois versions.
 */

/* ═══ Poser une activité ═══════════════════════════════════════════════════════════════ */

/*
 * La fenêtre. Sa boîte, son fond et son ombre viennent du paquet ; ne reste ici que la façon dont
 * ses lignes s'empilent.
 *
 * L'écart est celui de lignes, non celui de champs étiquetés : sans mot au-dessus de chacune, la
 * distance qui les séparait ferait un blanc où l'œil se perd.
 */
.activity-dialog .activity-form {
    display: flex;
    flex-direction: column;
    gap: var(--app-space-md);
}

/*
 * Une ligne : son dessin en gouttière, et le champ qui suit. La gouttière a une largeur fixe,
 * sans quoi les dessins ne seraient pas alignés d'une ligne à l'autre — et c'est cet alignement
 * qui les fait lire comme une colonne plutôt que comme des marques posées au hasard.
 */
.activity-form-line {
    display: flex;
    align-items: center;
    gap: var(--app-space-sm);
}

.activity-form-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.5rem;
    color: var(--app-ink-muted);
}

/* Ce qui suit la gouttière occupe le reste de la ligne. */
.activity-form-line > :not(.activity-form-glyph) {
    flex: 1;
    min-width: 0;
}

/*
 * L'intitulé n'a pas de dessin en gouttière : c'est le sujet de la fenêtre, pas une de ses
 * lignes. Il commence pourtant là où commencent les champs, et non au bord — **une seule colonne
 * de saisie**, du premier champ au dernier. Un intitulé aligné sur le bord ferait une marche à
 * chaque ligne suivante, et l'œil la suivrait au lieu de suivre ce qu'il y a à remplir.
 */
.activity-form-subject {
    display: flex;
    flex-direction: column;
    padding-left: calc(1.5rem + var(--app-space-sm));
}

.activity-form :is(input, select, textarea) {
    width: 100%;
    padding: var(--app-space-xs) var(--app-space-sm);
    border: 1px solid var(--app-line-control);
    border-radius: var(--app-radius-ui);
    background: var(--app-surface);
    color: var(--app-ink);
    font: inherit;
}

.activity-form :is(input, select, textarea):focus-visible {
    outline: none;
    border-color: var(--app-accent);
    box-shadow: var(--app-shadow-focus);
}

/* Une ligne qui porte une boîte de texte : son dessin se cale en haut, à hauteur de la première
   ligne écrite, et non au milieu d'un bloc de trois lignes. */
.activity-form-line--tall {
    align-items: flex-start;
}

.activity-form-line--tall .activity-form-glyph {
    /* Descendu du demi-écart qui sépare le haut de la boîte de sa première ligne de texte. */
    margin-top: var(--app-space-xs);
}

.activity-form textarea {
    resize: vertical;
}

/*
 * L'intitulé porte la fenêtre : il se lit franchement plus grand que ce qui le suit. C'est la
 * seule ligne qu'on relira dans six mois, dans une liste — les autres champs ne disent que le
 * moment et le rangement, et se relisent dans la fiche.
 *
 * La graisse est intermédiaire : un titre en gras dans un champ de saisie se lit comme un intitulé
 * déjà écrit, alors qu'il est encore à écrire.
 */
.activity-form-subject input {
    height: 2.5rem;
    padding: var(--app-space-2xs) var(--app-space-xs);
    font-size: 1.4375rem;
    font-weight: 450;
}

/*
 * Le tiret qui sépare le début de la fin, et les deux champs qui suivent.
 *
 * Le groupe pèse autant que le début : sans cela, ses deux champs se partageraient la part d'un
 * seul et se retrouveraient deux fois plus étroits que ceux d'en face.
 */
.activity-form-until {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    gap: var(--app-space-2xs);
    min-width: 0;
}

.activity-form-dash {
    flex: 0 0 auto;
    color: var(--app-ink-muted);
}

.activity-form-until .activity-date {
    flex: 1 1 0;
    min-width: 6.5rem;
}

/*
 * La fenêtre est plus large que celle du paquet, qui est taillée pour un message et deux boutons.
 * Celle-ci porte une ligne de quatre champs — deux jours, deux heures — et un jour tronqué dans
 * son propre champ ne s'écrit plus. La largeur est donc celle que cette ligne réclame, et pas une
 * de plus.
 */
.activity-dialog {
    width: min(38rem, calc(100vw - var(--app-space-2xl)));
}

/* Le reste du dessin de la fenêtre — les filets, la croix, l'espacement des champs — est celui
   de toutes les fenêtres d'ajout, et se lit dans `add.css`. Ne reste ici que la largeur, qui est
   propre à cette ligne de quatre champs. */

/* Le jour et l'heure côte à côte sur la même ligne : c'est un seul moment, et l'heure ne prend
   que ce qu'il lui faut — quatre chiffres n'ont pas besoin de la moitié d'une fenêtre. */
.activity-form-moment {
    display: flex;
    align-items: center;
    /* Serré : quatre champs et un tiret tiennent sur cette ligne dès qu'un rendez-vous est
       choisi, et l'écart des lignes voisines les couperait. */
    gap: var(--app-space-2xs);
}

/* Les deux jours se partagent la ligne à parts égales, et ne descendent jamais sous la largeur
   de « jj/mm/aaaa » : une date tronquée dans son propre champ ne s'écrit plus. */
.activity-form-moment .activity-date {
    flex: 1 1 0;
    min-width: 6.5rem;
}

/*
 * Cinq caractères et une horloge : le champ d'heure prend exactement ce qu'il lui faut, sans
 * grandir ni rétrécir. Laissé souple, il se faisait manger par les dates voisines jusqu'à ne plus
 * montrer que deux tirets — et une heure qu'on ne lit pas ne se corrige pas.
 */
.activity-form-moment input[type='time'],
.activity-form-until input[type='time'] {
    flex: 0 0 5.25rem;
    padding-right: var(--app-space-2xs);
}

/* La saisie et son calendrier dans la même boîte, le bouton au bout du champ — là où le
   navigateur posait le sien. */
.activity-date {
    display: flex;
    align-items: center;
    gap: var(--app-space-2xs);
}

.activity-date input {
    flex: 1;
    min-width: 0;
}

/* ═══ La liste ═════════════════════════════════════════════════════════════════════════ */

/*
 * Les lignes se touchent, et un filet les sépare.
 *
 * L'écart seul suffisait tant qu'une activité tenait sur une ligne. Depuis qu'elle en occupe
 * deux — l'intitulé, puis sa note —, le même blanc sépare aussi bien deux activités que les deux
 * lignes d'une seule, et on ne sait plus où l'une finit. Un filet le dit sans hésitation
 * possible, là où il aurait fallu doubler le blanc pour obtenir moitié moins de certitude.
 *
 * Un filet ENTRE les lignes, jamais autour : ce qui entoure chaque ligne en fait une grille, et
 * une grille se lit plus lentement qu'une liste.
 */
.activity-list {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
}

/*
 * Une ligne : la case, puis tout le reste dans un même lien. Le fond ne se teinte qu'au survol.
 *
 * Les deux blocs sont alignés par le haut et non par le milieu : une ligne qui porte une note
 * fait deux hauteurs, et une case centrée sur les deux flotterait au milieu de rien au lieu de
 * répondre à l'intitulé qu'elle coche.
 */
.activity-row {
    display: flex;
    align-items: flex-start;
    gap: var(--app-space-sm);
    padding: var(--app-space-sm);
    border-radius: var(--app-radius-ui);
}

/* Le filet sépare, il n'encadre pas : il n'y en a donc pas au-dessus de la première ligne, où il
   ne séparerait de rien. */
.activity-row + .activity-row {
    border-top: 1px solid var(--app-line);
}

.activity-row:hover {
    background: var(--app-hover);
}

/*
 * La case à cocher est un bouton d'envoi, et doit pourtant se lire comme une case : ni fond, ni
 * bordure, ni retrait. Ce qui reste est le dessin, et la cible qu'on vise sans la chercher.
 */
.activity-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    /* La hauteur d'une ligne de texte, pour que la case tombe au milieu de l'intitulé qu'elle
       coche — et non au milieu d'une ligne qui porte aussi une note. */
    min-height: calc(var(--app-leading) * 1rem);
    padding: 0;
    border: 0;
    background: none;
    color: var(--app-ink-muted);
    font-size: 1.125rem;
    cursor: pointer;
}

.activity-check:hover,
.activity-check:focus-visible {
    color: var(--app-accent);
}

.activity-row[data-done] .activity-check {
    color: var(--app-success, var(--app-accent));
}

/* La ligne entière est le lien : l'intitulé, le dessin, la date, la note et le blanc autour
   mènent tous à la fiche. L'encre reste celle du texte — c'est le fond qui répond au curseur. */
.activity-subject {
    display: flex;
    flex-direction: column;
    gap: var(--app-space-2xs);
    flex: 1;
    min-width: 0;
    color: inherit;
}

.activity-subject:hover {
    text-decoration: none;
}

/* Ce qui se lit d'un coup d'œil : la nature, l'intitulé, le moment, le projet. Aligné sur la
   base des lettres pour que le dessin et la date se posent sur la même ligne d'écriture. */
.activity-head {
    display: flex;
    align-items: baseline;
    gap: var(--app-space-sm);
    min-width: 0;
}

.activity-kind {
    flex: 0 0 auto;
    align-self: center;
    color: var(--app-ink-muted);
}

.activity-what {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

/*
 * Ce qui est fait reste lisible, et cesse de réclamer l'attention : l'encre s'éteint, la barre
 * dit que c'est derrière nous. Effacer la ligne serait pire — on coche pour voir que c'est fait,
 * pas pour que ça disparaisse sous le curseur.
 */
.activity-row[data-done] .activity-what {
    color: var(--app-ink-muted);
    text-decoration: line-through;
}

/* Le moment en bout de ligne, en retrait : il se trouve quand on le cherche, et ne dispute pas
   l'intitulé du regard. En retard, il cesse d'être discret. */
.activity-when {
    flex: 0 0 auto;
    color: var(--app-ink-muted);
    font-size: var(--app-text-sm);
    white-space: nowrap;
}

.activity-when[data-tone='danger'] {
    color: var(--app-danger, var(--app-ink));
    font-weight: var(--app-weight-semibold);
}

/*
 * La note, sous l'intitulé. Deux lignes au plus : ce qui a été écrit en posant l'activité est ce
 * qu'on ne réécrira jamais, et le cacher derrière un clic revient à l'avoir perdu — mais dix
 * lignes par activité feraient une page qu'on ne parcourt plus. La suite se lit sur la fiche.
 *
 * Les retours à la ligne de la note sont gardés : ce qui a été écrit en trois points se lit en
 * trois points, et non en un paragraphe où ils se confondent.
 */
.activity-note {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--app-ink-muted);
    font-size: var(--app-text-sm);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Le projet, quand la liste en mêle plusieurs. Une pastille et non du texte nu : c'est une
   étiquette, pas une suite de la phrase. */
.activity-where {
    flex: 0 0 auto;
    max-width: 10rem;
    overflow: hidden;
    padding: 0 var(--app-space-xs);
    border-radius: var(--app-radius-pill);
    background: var(--app-accent-soft);
    color: var(--app-accent);
    font-size: var(--app-text-xs);
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ═══ La fiche ═════════════════════════════════════════════════════════════════════════ */

/*
 * La charpente vient de `sheet.css` — les deux colonnes, le titre, les onglets, les champs qui
 * s'ouvrent au clic. Ne reste ici que ce qui n'appartient qu'à l'activité.
 */

/*
 * La note en grand, seule face de l'activité — à ne pas confondre avec `.activity-note`, qui est
 * son aperçu tronqué dans une ligne de liste. Deux endroits, deux dessins, deux noms.
 *
 * Son intitulé ne s'écrit pas : l'onglet au-dessus le porte déjà, et le répéter à dix centimètres
 * ferait chercher la différence entre les deux. La saisie prend la hauteur qu'on lui donne —
 * c'est le seul endroit de l'application où l'on écrit plus de deux lignes.
 */
.activity-notepad .field {
    grid-template-columns: minmax(0, 1fr);
}

.activity-notepad .field-label {
    display: none;
}

.activity-notepad .field-edit textarea {
    min-height: 12rem;
}

/* ═══ Dans un projet ═══════════════════════════════════════════════════════════════════ */

/* Le cadre du projet reprend la liste telle quelle, et n'ajoute que l'écart entre le bouton qui
   pose une activité de plus et celles qui sont déjà là. */
.project-activities .add {
    margin-bottom: var(--app-space-md);
}