@layer components {
  /* Todo shows nothing. A list where every row is badged "Todo" has taught the
     reader to ignore badges by the fifth row. */
  /* Set as a label in base.css; the colour is what this file is for. */
  .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(--warn); }
  .status--done        { color: var(--go); }
  .status--cancelled   { color: var(--ink-faint); }

  /* The chase note, which is the whole point of Waiting On (D-03). */
  .waiting-note {
    grid-column: 3 / -2;
    grid-row: 2;
    font-size: var(--text-sm);
    color: var(--warn);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The line that says a list stopped. Aligned to the title column like the
     empty state, and set quietly: it is a fact about the list, not a control. */
  .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 (max-width: 48rem) {
    .list-end { padding-left: 0; }
  }
}