/* A list block in a record's column (records/_list_block): the list, the
   stage, and the entry's own values as the record's are. Everything it says
   but its size and its arrival, utilities and attributes.css already say. */
@layer components {
  /* At the column's size: the list's name and its stage read with its values,
     the record's own name alone larger (the Overview's redesign, 2026-10-20). */
  .list-block {
    font-size: var(--text-small);
  }

  /* The block just arrived at — adding to a list lands here — wears the
     selected wash for a breath, then is a block like the others. */
  .list-block:target {
    animation: list-block-arrive 1.6s var(--ease-out);
  }

  @keyframes list-block-arrive {
    from { background-color: var(--color-selected); }
  }
}