/*
 * Ce que la fiche d'un papier ajoute à la charpente.
 *
 * La charpente — les deux colonnes, les onglets, les panneaux, les champs qui se corrigent là où
 * ils se lisent — vit dans `sheet.css`, partagée avec la fiche d'un projet. Ne reste ici que ce
 * qui n'a de sens que devant un papier : son aperçu, les gens qui y figurent, et la proposition
 * d'une relecture.
 *
 * Rien n'est écrit en dur : chaque couleur, chaque espacement et chaque rayon vient d'un alias du
 * design system, ce qui fait suivre les palettes sans une règle de plus.
 */

/* ═══ Le papier ════════════════════════════════════════════════════════════════════════════ */

/*
 * L'aperçu prend toute la hauteur du panneau, le nom d'origine tient la dernière ligne.
 *
 * Le panneau porte déjà son retrait et son défilement : l'aperçu n'a qu'à prendre la place qui
 * reste. `min-height: 0` parce qu'un enfant flexible refuse de rétrécir sous la hauteur de son
 * contenu — sans lui, une image haute pousserait le nom d'origine hors du cadre.
 */
.paper {
    display: flex;
    flex-direction: column;
    gap: var(--app-space-sm);
    flex: 1 1 auto;
    min-height: 0;
}

/*
 * L'image se pose entière, centrée, sans jamais être agrandie : un ticket de caisse de 300
 * pixels étiré sur mille serait illisible, alors qu'il se lit très bien à sa taille.
 *
 * Le damier derrière elle n'est pas une coquetterie : un scan aux bords blancs sur un fond blanc
 * n'a plus de bords, et on ne sait plus si la page est coupée. Deux teintes du design system, et
 * il suit les palettes comme le reste.
 */
.paper-view {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    object-fit: contain;
    object-position: center;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-sm);
    background-color: var(--app-surface-sunken, var(--app-hover));
    background-image:
        linear-gradient(45deg, var(--app-hover) 25%, transparent 25%),
        linear-gradient(-45deg, var(--app-hover) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--app-hover) 75%),
        linear-gradient(-45deg, transparent 75%, var(--app-hover) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

/*
 * Un PDF n'est pas une image : le cadre a sa propre visionneuse, avec ses commandes, et il lui
 * faut une surface pleine plutôt qu'un contenu à contenir. Pas de damier non plus — la
 * visionneuse pose son propre fond par-dessus.
 */
.paper-view--pdf {
    background: var(--app-surface);
    object-fit: fill;
}

/*
 * Ce qu'aucun navigateur ne sait afficher : un tableur, un traitement de texte, une archive.
 *
 * Ce n'est pas une panne, et l'écran ne doit pas en avoir l'air. Un dessin, une phrase, et le
 * bouton d'ouverture juste en dessous — qui, lui, fait descendre le fichier dans un dossier.
 */
.paper-blind {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--app-space-sm);
    min-height: 12rem;
    padding: var(--app-space-lg);
    border: 1px dashed var(--app-line);
    border-radius: var(--app-radius-sm);
    color: var(--app-ink-muted);
    text-align: center;
}

.paper-blind-icon {
    display: inline-flex;
    font-size: var(--app-text-2xl);
    color: var(--app-ink-subtle, var(--app-ink-muted));
}

/* Le nom du fichier tel qu'il est arrivé, et de quoi l'ouvrir. Une ligne, qui passe à la
   suivante quand la colonne se resserre. */
.paper-origin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--app-space-xs);
    margin: 0;
    font-size: var(--app-text-sm);
    color: var(--app-ink-muted);
}

/* ═══ La lecture ═══════════════════════════════════════════════════════════════════════════ */

.reading {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--app-space-sm);
}

.reading p {
    margin: 0;
}

/* ═══ Qui figure sur le papier ═════════════════════════════════════════════════════════════ */

.party-list {
    display: flex;
    flex-direction: column;
    gap: var(--app-space-2xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.party {
    display: flex;
    align-items: center;
    gap: var(--app-space-xs);
    padding: var(--app-space-2xs);
    border-radius: var(--app-radius-ui);
    font-size: var(--app-text-sm);
}

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

.party-name {
    flex: 1 1 auto;
    min-width: 0;
    /* Un nom d'organisation sans espace déborderait de la colonne plutôt que d'y revenir. */
    overflow-wrap: anywhere;
}

/*
 * La croix qui détache. Elle ne s'allume qu'au survol de sa ligne : c'est un geste sans retour,
 * et une croix offerte en permanence sous chaque nom se lit comme une invitation. Elle reste
 * atteignable au clavier — la mise au point la révèle aussi.
 */
.party-remove {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--app-ink-muted);
    cursor: pointer;
    opacity: 0;
}

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

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

/* Le carnet et le rôle se partagent la largeur, le bouton prend la sienne : sans ça, un nom long
   pousse le bouton hors de la colonne. */
.suggest-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--app-space-xs);
}

.suggest-form .app-field {
    flex: 1 1 8rem;
    min-width: 0;
}

/* ═══ Ce que la relecture propose ══════════════════════════════════════════════════════════ */

/*
 * La décision, en pleine largeur au-dessus des deux colonnes.
 *
 * Une carte, ici, et c'est voulu : c'est la seule chose de la page qui demande une réponse, et
 * elle doit se distinguer de ce qui se lit. Elle disparaît dès qu'elle est tranchée.
 */
.proposal {
    display: flex;
    flex-direction: column;
    gap: var(--app-space-sm);
    margin-bottom: var(--app-space-lg);
    padding: var(--app-space-md) var(--app-space-lg);
    border: 1px solid var(--app-accent);
    border-radius: var(--app-radius);
    background: var(--app-surface);
}

.proposal-title {
    display: flex;
    align-items: center;
    gap: var(--app-space-xs);
    margin: 0;
    font-size: var(--app-text-md);
    font-weight: var(--app-weight-semibold);
}

.proposal-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Le nom des deux colonnes, aligné sur la grille des lignes.
 *
 * Caché tant qu'il n'y a qu'une colonne : en dessous de la largeur d'une tablette, les valeurs
 * s'empilent, et deux intitulés y désigneraient une disposition qui n'existe pas.
 */
.proposal-head {
    display: none;
    margin: 0;
    font-size: var(--app-text-xs);
    font-weight: var(--app-weight-semibold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--app-ink-muted);
}

@media (min-width: 64rem) {
    .proposal-head {
        display: grid;
        /* La même grille que les lignes, décalée d'une colonne : la première appartient aux
           intitulés, et rien ne la surmonte. */
        grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--app-space-2xs) var(--app-space-md);
        padding-bottom: var(--app-space-2xs);
    }

    .proposal-head > :first-child {
        grid-column: 2;
    }
}

/*
 * Une ligne par changement — et l'horizontale réservée à ce qui la mérite : ce qui était là, puis
 * ce qui est proposé.
 *
 * Les changements ont tenu en colonnes pendant une demi-journée. Un résumé de quinze lignes y
 * voisinait avec un destinataire de trois mots, et la rangée prenait la hauteur du plus long :
 * des colonnes en dents de scie, qu'on lit en balayant. Une liste se lit de haut en bas.
 *
 * Empilé par défaut : sur un téléphone, deux valeurs côte à côte ne laissent à chacune que la
 * moitié d'une colonne déjà étroite.
 */
.proposal-change {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--app-space-2xs) var(--app-space-md);
    align-items: start;
    padding: var(--app-space-sm) 0;
}

.proposal-change + .proposal-change {
    border-top: 1px solid var(--app-line);
}

/* L'intitulé et sa coche tiennent une colonne à eux, comme les intitulés du rail : c'est la
   valeur qu'on lit, pas le mot qui la nomme. */
.proposal-pick {
    display: flex;
    align-items: center;
    gap: var(--app-space-xs);
    cursor: pointer;
}

.proposal-change p {
    margin: 0;
    min-width: 0;
    font-size: var(--app-text-sm);
    /* Une valeur sans espace — une adresse, un long numéro — déborderait de sa colonne. */
    overflow-wrap: anywhere;
}

@media (min-width: 64rem) {
    .proposal-change {
        grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 1fr);
    }

    /* Rien à remplacer : la valeur proposée prend la place des deux. Une colonne « avant » vide
       en face d'un texte long ferait lire un manque là où il n'y a rien. */
    .proposal-change[data-fills] .proposal-reads {
        grid-column: 2 / -1;
    }
}

/*
 * **Le barré dit ce qui sera perdu, et il suit la coche.**
 *
 * Il était posé une fois pour toutes sur la valeur d'avant, ce qui annonçait un remplacement que
 * rien n'avait encore décidé : une ligne décochée montrait son ancienne valeur barrée alors
 * qu'elle allait précisément la garder. Cocher inverse donc le trait — on voit ce qu'on garde et
 * ce qu'on jette, sans lire les intitulés.
 *
 * Sans une ligne de JavaScript : `:has()` lit l'état de la coche, et le navigateur le tient à
 * jour tout seul. Ce qui se règle en CSS n'a pas à se réveiller à chaque clic.
 */
.proposal-change:has(input:checked) .proposal-was,
.proposal-change:not(:has(input:checked)) .proposal-reads {
    color: var(--app-ink-muted);
    text-decoration: line-through;
}

/* ═══ Le mode analyse ══════════════════════════════════════════════════════════════════════ */

/*
 * Le bandeau d'une lecture en cours, devant les deux colonnes.
 *
 * **Il est là pour être vu de partout.** Une lecture lancée depuis l'onglet « Lecture » se regarde
 * aussi depuis l'onglet « Le document » — c'est même ce qu'on fait : on lit le papier pendant que
 * la machine le lit. Rangée derrière un onglet, elle se passait sans témoin.
 *
 * Teinté d'accent, comme la proposition qui lui succède : c'est la même affaire, à deux moments.
 */
.analysis {
    display: flex;
    align-items: start;
    gap: var(--app-space-sm);
    margin-bottom: var(--app-space-lg);
    padding: var(--app-space-md) var(--app-space-lg);
    border: 1px solid var(--app-accent);
    border-radius: var(--app-radius);
    background: var(--app-surface);
}

/* L'étincelle bat doucement : c'est le seul signe qui dise « ça travaille » entre deux étapes,
   et une étape dure plusieurs secondes. */
.analysis-spark {
    display: inline-flex;
    flex: 0 0 auto;
    font-size: var(--app-text-lg);
    color: var(--app-accent);
    animation: analysis-beat 1.6s ease-in-out infinite;
}

@keyframes analysis-beat {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

/* Ce qui n'aime pas le mouvement ne le subit pas : le bandeau reste, l'étincelle cesse de battre.
   Les étapes, elles, continuent de dire l'avancement — c'est l'information, pas l'animation. */
@media (prefers-reduced-motion: reduce) {
    .analysis-spark {
        animation: none;
    }
}

.analysis-said {
    display: flex;
    flex-direction: column;
    gap: var(--app-space-xs);
    min-width: 0;
}

.analysis-title {
    margin: 0;
    font-weight: var(--app-weight-semibold);
}

/*
 * Les étapes à la file, séparées par un chevron. Elles passent à la ligne sur un écran étroit
 * plutôt que de déborder : il y en a six, et un téléphone n'en tient pas trois.
 */
.analysis-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--app-space-2xs) var(--app-space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--app-text-sm);
    color: var(--app-ink-muted);
}

.analysis-step + .analysis-step::before {
    content: "›";
    margin-right: var(--app-space-sm);
    color: var(--app-line-strong);
}

/* Ce qui est franchi s'estompe, ce qui se fait maintenant se détache : on lit d'un coup d'œil où
   ça en est, et ce qui reste. */
.analysis-step[data-done] {
    color: var(--app-ink-subtle, var(--app-ink-muted));
    text-decoration: line-through;
}

.analysis-step[data-now] {
    color: var(--app-ink);
    font-weight: var(--app-weight-semibold);
}

/* ═══ La légende des origines ══════════════════════════════════════════════════════════════ */

/*
 * Ce que les trois marques veulent dire, une fois en tête de colonne.
 *
 * Trois symboles qu'on découvre ne se devinent pas, et une infobulle ne se survole que si l'on a
 * déjà compris qu'il y a quelque chose à survoler. La légende se lit une fois ; ensuite la marque
 * seule suffit, et c'est pourquoi elle est discrète.
 */
.origins-key {
    display: flex;
    flex-wrap: wrap;
    gap: var(--app-space-2xs) var(--app-space-sm);
    margin: 0 0 var(--app-space-md);
    padding-bottom: var(--app-space-sm);
    border-bottom: 1px solid var(--app-line);
    font-size: var(--app-text-xs);
    color: var(--app-ink-muted);
}

.origins-key-item {
    display: inline-flex;
    align-items: center;
    gap: var(--app-space-2xs);
}

/* ═══ Ce que la lecture a rendu ════════════════════════════════════════════════════════════ */

/*
 * Les deux moitiés de ce que la chaîne a produit, dans l'onglet « Lecture ».
 *
 * **Sans cadre**, comme le reste : un filet en tête de section, et c'est tout. L'onglet ne
 * montrait qu'un bouton « relire » — un onglet pour une commande, ce qui n'avait pas de sens.
 */
.returned {
    padding-top: var(--app-space-md);
    border-top: 1px solid var(--app-line);
}

.returned-title {
    display: flex;
    align-items: center;
    gap: var(--app-space-xs);
    margin: 0 0 var(--app-space-sm);
    font-size: var(--app-text-xs);
    font-weight: var(--app-weight-semibold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--app-ink-muted);
}

/* L'intitulé à gauche, la valeur à droite — la même grille que les champs de la colonne, pour
   que les deux se lisent de la même façon. */
.returned-list {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: var(--app-space-xs) var(--app-space-md);
    margin: 0;
}

.returned-list dt {
    color: var(--app-ink-muted);
    font-size: var(--app-text-sm);
    text-align: right;
}

.returned-list dd {
    margin: 0;
    min-width: 0;
    /* Une valeur sans espace — un long numéro — déborderait de sa colonne. */
    overflow-wrap: anywhere;
}

/* La marque d'origine d'une ligne qui n'est pas un champ modifiable au clic : la nature. Elle n'a
   pas de crayon à céder, donc pas de position absolue à prendre — elle suit simplement. */
.summary-mark {
    display: inline-flex;
    color: var(--app-ink-subtle, var(--app-ink-muted));
    font-size: var(--app-text-sm);
    /* Le même effacement que la marque des champs : les deux disent la même chose et doivent
       peser pareil. */
    opacity: .55;
}