/* Projects (Work, Planning): the owner's table (tasks.css); a project's name is the button that opens its form */
[data-page="projects"] td.tasks-name { min-width: 300px; padding: 0; }
[data-page="projects"] td.tasks-name button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px; }
[data-page="projects"] td.tasks-name button:hover b { text-decoration: underline; }
[data-page="projects"] td.tasks-name button[aria-expanded="true"] b { color: var(--red2); }
[data-page="projects"] td.tasks-name b { display: block; font-weight: 700; }
.projects-prog { display: flex; align-items: center; gap: 8px; }
.projects-prog .tasks-prog { width: 100px; }
.projects-prog span { font: 12px var(--mono); color: var(--text3); }
.projects-form { margin-bottom: 16px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.projects-del { margin-left: auto; color: var(--bad); }
[data-page="projects"] .empty p { margin: 14px 0 0; }
@media (max-width: 1100px) { .projects-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A phone keeps Project, Status and Deadline, the goal on 2 lines; the form a name opens holds the owner, the department and the progress */
@media (max-width: 760px) {
  .projects-form { grid-template-columns: minmax(0, 1fr); }
  [data-page="projects"] .tw :is(th, td):is(:nth-child(2), :nth-child(3), :nth-child(5)) { display: none; }
  [data-page="projects"] .tw td.tasks-name { min-width: 0; white-space: normal; }
  [data-page="projects"] .tw td.tasks-name .tasks-hint { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}