/* ==========================================================================
   TASKS — the task list, the form over it, and the card on an application's page
   --------------------------------------------------------------------------
   Rules for this file: design TOKENS only (no hex, no px colours), LOGICAL
   properties only (inline-start/end, block-start/end — never left/right), and
   nothing that cannot survive dir="rtl" and dir="ltr" alike. Loaded after
   app.css and apple.css, so it may rely on every token they define.

   Every class is prefixed .tsk-.

   Contents
     1  List: tabs, table, and its small-screen layout
     2  The form that opens over the list
     3  The card on an application's page
   ========================================================================== */


/* ==========================================================================
   1 · LIST
   ========================================================================== */

/* The tabs are the groups of the list. As on the applications list they wrap onto a second line instead of scrolling
   sideways — a control that scrolls hides the tabs it has run out of room for — and their ends are rounded rather than
   pill-shaped so a wrapped control still looks like one. */
.tsk-tabs { min-inline-size: 0; max-inline-size: 100%; }

.tsk-tabs .tabs {
  flex-wrap: wrap;
  inline-size: fit-content;
  max-inline-size: 100%;
  overflow: visible;
  border-radius: var(--radius-xl);
}

.tsk-count {
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.5rem;
  padding-inline: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
  color: var(--color-text-muted);
  background: var(--color-fill);
  border-radius: var(--radius-pill);
}

/* Inside the selected tab's thumb the figure has to stay legible on the light and the dark thumb alike. */
.tabs__tab.is-active .tsk-count {
  color: var(--color-text);
  background: var(--color-surface-sunken);
}

/* Five filters would be five rows on a phone, a screen of scrolling before the first task: two to a row there, the button below. */
@media (max-width: 47.99rem) {
  .tsk-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tsk-filters .filter-bar__actions { grid-column: 1 / -1; }
}

/* What the task is, then what it says, then what it belongs to — each on its own line. */
.tsk-cell-task { min-inline-size: 14rem; }

.tsk-title {
  display: block;
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.tsk-desc {
  display: -webkit-box;
  margin-block-start: var(--space-1);
  overflow: hidden;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tsk-app {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-block-start: var(--space-1);
  font-size: var(--font-size-xs);
}

/* The number of the application is a link in a line of small text. Its hit area is made as tall as a finger by padding that the
   same amount of negative margin takes back, so the line is no taller and the row stays as dense as it was. */
.tsk-app .table__link {
  padding-block: var(--space-3);
  margin-block: calc(var(--space-3) * -1);
}

/* A task that is over is read as history, not as something to do. */
.tsk-row.is-closed .tsk-title { color: var(--color-text-muted); }

.tsk-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  min-inline-size: 0;
}

/* The due time. Late is said in words by the badge beside the status, and shown here by weight and colour — never by colour alone. */
.tsk-cell-due { white-space: nowrap; }

.tsk-due {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}

.tsk-due--late {
  font-weight: var(--font-weight-semibold);
  color: var(--color-danger-fg);
}

.tsk-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: var(--tap-target-min);
  min-inline-size: var(--tap-target-min);
  padding: 0;
  font: inherit;
  font-weight: var(--font-weight-semibold);
  color: inherit;
  text-align: start;
  background: none;
  border: 0;
  cursor: pointer;
}
.tsk-sort:hover { text-decoration: underline; }

.tsk-cell-actions { min-inline-size: 16rem; }

.tsk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}

/* A table cannot be read at 375px. Under 48rem every row becomes a card: the cells stack two to a line, each labelled from its
   data-label, and the header row — which the labels replace — is kept for assistive technology but not painted. */
@media (max-width: 47.99rem) {
  .tsk-table thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .tsk-table,
  .tsk-table tbody { display: block; }

  .tsk-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
    padding: var(--space-4);
    border-block-end: 1px solid var(--color-hairline);
  }
  .tsk-table tbody tr:last-child { border-block-end: 0; }

  .tsk-table td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-inline-size: 0;
    padding: 0;
    border: 0;
  }

  .tsk-table td[data-label]::before {
    content: attr(data-label);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-subtle);
  }

  /* The task is the card's heading: full width, no label. */
  .tsk-table td.tsk-cell-task {
    grid-column: 1 / -1;
    min-inline-size: 0;
    font-size: var(--font-size-md);
  }
  .tsk-table td.tsk-cell-task::before { content: none; }

  .tsk-table td.tsk-cell-actions {
    grid-column: 1 / -1;
    min-inline-size: 0;
  }
  .tsk-table td.tsk-cell-actions:empty { display: none; }

  .tsk-cell-due { white-space: normal; }
}


/* ==========================================================================
   2 · THE FORM OVER THE LIST
   ========================================================================== */

.tsk-modal__about {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  overflow-wrap: anywhere;
}

/* Priority, the day and the time of day sit in a row where there is room, and wrap where there is not. */
.tsk-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-3) var(--space-4);
}
.tsk-form-grid .field + .field { margin-block-start: 0; }

.tsk-picked {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
}

.tsk-picked__text {
  min-inline-size: 0;
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.tsk-results {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.tsk-results li + li { border-block-start: 1px solid var(--color-hairline); }

.tsk-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  inline-size: 100%;
  min-block-size: var(--tap-target-min);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  font: inherit;
  text-align: start;
  color: var(--color-text);
  background: var(--color-surface);
  border: 0;
  cursor: pointer;
}
.tsk-result:hover,
.tsk-result:focus-visible { background: var(--color-surface-hover); }

.tsk-result__number { font-weight: var(--font-weight-semibold); }

.tsk-result__text {
  flex: 1 1 10rem;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}


/* ==========================================================================
   3 · THE CARD ON AN APPLICATION'S PAGE
   ========================================================================== */

/* The cards of the application page are put in order with `order` (applications.css: documents 1, appointment 2, details 3, fees 4,
   notes 5, history 6). Tasks come right after the paperwork they are about: beside the appointment in the number, and ahead of it
   on a phone, where the two columns are one and the first in the page comes first among equals. */
.tsk-application { order: 2; }

/* A link inside the card is a target like any other. */
.tsk-link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-target-min);
}

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

.tsk-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-hairline);
}
.tsk-item:first-child { padding-block-start: 0; }
.tsk-item:last-child { border-block-end: 0; }

.tsk-item__main {
  flex: 1 1 14rem;
  min-inline-size: 0;
}

.tsk-item__title {
  margin: 0 0 var(--space-1);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.tsk-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
}

.tsk-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}

/* A finished task is history; it is kept out of the way until asked for. */
.tsk-closed summary {
  min-block-size: var(--tap-target-min);
  display: flex;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}
.tsk-closed[open] summary { margin-block-end: var(--space-2); }

.tsk-closed .tsk-item__title { color: var(--color-text-muted); }

.tsk-add {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
}

.tsk-add .field + .field { margin-block-start: 0; }

.tsk-add__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-3) var(--space-4);
}

.tsk-add__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}