@layer components {
  .status { white-space: nowrap; color: var(--ink-muted); }

  .status--captured    { color: var(--ink-muted); }
  .status--in_progress { color: var(--accent); }
  .status--waiting_on  { color: var(--colour-amber); }
  .status--done        { color: var(--go); }
  .status--cancelled   { color: var(--ink-faint); }

  .waiting-note {
    grid-column: 3 / -2;
    grid-row: 2;
    justify-self: start;
    align-self: start;
    max-width: 100%;
    padding: 1px var(--space);
    border-radius: var(--radius-sm);
    background: color-mix(in oklab, var(--colour-amber) 12%, var(--surface));
    font-size: var(--text-sm);
    color: var(--colour-amber);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  
  .waiting-note .mention {
    padding: 0;
    margin-inline: 0;
    background: none;
  }

  
  @media (width > 48rem) {
    .task:has(.waiting-note) {
      grid-template-rows: auto 0;
      row-gap: 0;
      margin-bottom: var(--space-2);
    }

    .waiting-note { margin-block-start: calc(var(--space) * -1); }
  }

  .list-end {
    padding: var(--space-4) 0 0;
    padding-left: var(--list-indent);
    color: var(--ink-faint);
    font-size: var(--text-sm);
  }

  .list-end__find {
    font: inherit;
    color: var(--accent);
    background: none;
    border: 0;
    padding: 0;
    min-height: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition), var(--responds);
  }

  @media (width <= 48rem) {
    .list-end { padding-left: 0; }
  }
}