/* The page of one project: properties, description, tasks and comments. */
/* ---- the page of one project (pj-, public/js/projet.js) ----
   Two columns: what one works on at the left, what one consults at the right. The properties are a
   table of two columns of their own, each row a label and the control that both shows and changes the
   value — there is no « Modifier » step and no second window. */
.pj-tete { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem; }
.pj-retour { font-weight: 600; white-space: nowrap; }
.pj-saved { font-size: .8rem; color: var(--ok); font-weight: 600; }
.pj-titre { margin-bottom: .8rem; }
.pj-titre h1 { margin: 0; }
.pj-emoji { width: 3rem; text-align: center; font-size: 1.2rem; }
/* The title is a field that only shows its frame when one points at it: reading comes first. */
.pj-titre-champ { flex: 1 1 auto; min-width: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.2;
  border: 1px solid transparent; background: none; padding: .2rem .3rem; }
.pj-titre-champ:hover { border-color: var(--line); }
.pj-titre-champ:focus { border-color: var(--line-strong); background: var(--surface); }
.pj-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
.pj-main > .panel + .panel, .pj-cote > .panel + .panel { margin-top: 1rem; }
/* A description is rarely a page: the reading height of a note would push the tasks and the comments
   below the fold for three lines of text. */
.pj-main .doc-block .md-view.note-read { min-height: 9rem; }
.pj-main .doc-block textarea.md-input { min-height: 12rem; }
/* The right column stays in view while the description and the tasks scroll past it. */
.pj-cote { position: sticky; top: .8rem; }
.pj-info { padding: .6rem .2rem; display: flex; flex-direction: column; gap: .2rem; }

.props { display: grid; grid-template-columns: 1fr 1fr; }
.prop { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .5rem; padding: .4rem .8rem;
  border-bottom: 1px solid var(--line); align-items: center; min-width: 0; }
.prop.wide { grid-column: 1 / -1; }
.prop:nth-child(odd):not(.wide) { border-right: 1px solid var(--line); }
.prop .pl { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.prop .pv { min-width: 0; }
.prop .pv > select, .prop .pv > input[type="text"] { width: 100%; }
.pj-statut { font-weight: 700; }
.pj-taches-liste { list-style: none; margin: 0; padding: 0; }
.pj-taches-liste li { display: flex; gap: .5rem; align-items: center; padding: .3rem 0; border-bottom: 1px solid var(--line); }
.pj-taches-liste li:last-child { border-bottom: 0; }
.pj-taches-liste li.faite .grow { text-decoration: line-through; color: var(--muted); }
.pj-lien { display: flex; gap: .3rem; align-items: center; margin-bottom: .3rem; }

/* The emoji and the title stay on one line: an input does not wrap, so letting it drop below would
   only cost a line without showing a character more. */
.pj-titre > .row { flex-wrap: nowrap; }

@media (max-width: 1000px) {
  .pj-grid { grid-template-columns: 1fr; }
  .pj-cote { position: static; }
  .props { grid-template-columns: 1fr; }
  .prop:nth-child(odd):not(.wide) { border-right: 0; }
}
@media (max-width: 700px) {
  /* A field never wraps its text: on a narrow screen the title is set smaller rather than cut sooner. */
  .pj-titre-champ { font-size: 1.25rem; }
  .pj-emoji { width: 2.4rem; font-size: 1rem; }
  .prop { grid-template-columns: 7.5rem minmax(0, 1fr); padding: .4rem .6rem; }
}

/* comments of a project: the threads, one level of replies, and the field to write one */
.pj-c-liste { display: flex; flex-direction: column; gap: .9rem; margin-bottom: .9rem; }
.pj-c { display: flex; gap: .5rem; }
.pj-c-corps { flex: 1 1 auto; min-width: 0; }
.pj-c-meta { font-size: .88rem; }
.pj-c-actions { display: flex; gap: .8rem; margin-top: .1rem; }
/* A comment is as tall as what it says: the reading height of a note would leave a blank page under
   each line. */
.pj-c .md-view { min-height: 0; padding: .1rem 0 0; }
.pj-c .md-view > :first-child { margin-top: .15rem; }
.pj-c .md-view > :last-child { margin-bottom: 0; }
.pj-reponses { margin-left: 1rem; padding-left: .8rem; border-left: 2px solid var(--line);
  display: flex; flex-direction: column; gap: .7rem; }
.pj-reponses:empty { display: none; }
.pj-composeur { display: flex; flex-direction: column; gap: .4rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.pj-composeur.reponse { margin: .6rem 0 .6rem 1.8rem; border-top: 0; padding-top: 0; }
.pj-c-zone { position: relative; display: flex; }
.pj-c-zone textarea { width: 100%; resize: vertical; }
/* the @ list opens above the field, which sits at the bottom of the thread */
.pj-c-zone .mention-pop { left: 0; bottom: calc(100% + .25rem); }