@layer components {
  /* ——— Due dates ———
     A due date is metadata until it is close; only then does it borrow straw
     (HANSHI 09, and the colour rule's "near due dates"). Nothing else about it
     changes — no chip, no weight, no second colour — because a date is a datum
     and not a state.

     One file rather than a rule per surface: the to-do row ruled this first and
     the board card asks the same question of the same column, so the treatment
     is stated once and both selectors join it. That is labels.css's reason, and
     the drift it exists to prevent had already started — the card was about to
     wear a tinted `.badge` for the same fact the to-do writes in ink.

     `white-space: nowrap` is the to-do row's: "Aug 19" folded in half inside a
     squeezed pill is worse than a pill that pushes. */
  .due,
  .todo__due {
    font-size: var(--text-small);
    white-space: nowrap;
    color: var(--color-ink-faint);
  }

  .due--near,
  .todo__due--near {
    color: var(--color-warning-ink);
  }
}