@layer components {
  /* Facts

     A short list of things that are simply true — a label and a value, no
     controls. Set as a grid rather than as rows of flex so the values line up
     down the page the way the task list's rails do; below the phone breakpoint
     the label sits above its value instead, because two columns in 20rem makes
     both of them narrow. */

  .facts { display: grid; gap: var(--space-2); margin: 0; }

  .facts__row {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: var(--space-2);
    align-items: baseline;
  }

  .facts__term { color: var(--ink-muted); font-size: var(--text-sm); }
  .facts__value { margin: 0; }

  @media (max-width: 40rem) {
    .facts__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  }
}