/* Aufgaben (SPEC 4.5): quick add, tabs, member filter, rows with tick, details and delete.
   Hover only inside the fine-pointer query at the end. */
@layer features {
  .tasks { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); width: min(100%, 860px); margin: 0 auto; }
  .tasks .page-header { margin-bottom: 0; }

  .tasks-add { display: grid; gap: var(--space-1); }
  .tasks-add-row { display: flex; gap: var(--space-2); }
  .tasks-add-row .input { flex: 1 1 auto; min-width: 0; }
  .tasks-add-row .button { flex: none; }

  .tabs {
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    border-bottom: 1px solid var(--color-line);
    scrollbar-width: thin;
  }
  .tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap-min);
    padding: 0 var(--space-4);
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--color-text-muted);
    font-weight: var(--weight-bold);
    white-space: nowrap;
    /* The row scrolls sideways and clips: the focus ring is drawn inside the tab (WCAG 2.4.7). */
    outline-offset: -3px;
  }
  .tab[aria-selected='true'] { color: var(--color-text); border-bottom-color: var(--color-accent); }
  .tab-count {
    min-width: 1.6em;
    padding: 0 var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--color-surface-2);
    color: var(--color-text);
    font-size: var(--text-xs);
    text-align: center;
  }
  .tab-count:empty { display: none; }

  .tasks-panel:focus { outline: none; }
  .tasks-panel:focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-lg); }
  .tasks-list { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 0 var(--space-3); }
  .tasks-list:empty { display: none; }
  .task-row { gap: var(--space-2); }
  .task-tick { flex: none; justify-content: center; min-width: var(--tap-min); }
  .task-open {
    display: grid;
    gap: 2px;
    width: 100%;
    min-height: var(--tap-min);
    padding: var(--space-1) 0;
    border: 0;
    background: none;
    color: var(--color-text);
    text-align: left;
  }
  .task-open .row-title { font-weight: var(--weight-bold); overflow-wrap: anywhere; }
  .task-open .row-meta { font-size: var(--text-sm); color: var(--color-text-muted); }
  .task-row.done .row-title { text-decoration: line-through; color: var(--color-text-muted); }
  .task-row.overdue .row-meta { color: var(--color-danger); font-weight: var(--weight-bold); }
  .task-people { display: flex; flex-wrap: wrap; gap: 2px; justify-content: flex-end; }
  .task-remove { background: none; color: var(--color-text-muted); }
  .task-spacer { flex: none; width: var(--tap-min); }
  .task-row.pending .row-title { font-style: italic; }
  .task-row.failed .row-meta { color: var(--color-danger); font-weight: var(--weight-bold); }

  @media (max-width: 599px) {
    /* Only the "+" shows; the word stays the button's accessible name. */
    .tasks-add-label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .task-people { display: none; }
    /* All four tabs fit (also at 320 px): label above its count, the four share the width. */
    .tab {
      flex: 1 1 0;
      flex-direction: column;
      justify-content: center;
      gap: 0;
      min-width: 0;
      padding: 0 var(--space-1);
      font-size: var(--text-sm);
    }
    .tab-count { min-width: 1.4em; padding: 0 2px; line-height: 1.25; }
    /* The detail sheet: Datum and Wiederholen one below the other, so "Nicht wiederholen" fits. */
    .task-form .field-row { grid-template-columns: minmax(0, 1fr); }
  }

  @media (hover: hover) and (pointer: fine) {
    .tab:hover { color: var(--color-text); }
    .task-open:hover .row-title { text-decoration: underline; }
    .task-remove:hover { color: var(--color-danger); }
  }
}