@layer components {
  /* ——— A question on the check-ins index ———
     The approved canvas's card: a hairline frame, the title as the door, the
     schedule as one quiet sentence, the latest answers as preview lines. The
     frame is this card's own identity; everything inside speaks in
     utilities. */
  .question-card {
    padding: var(--block-space) var(--inline-space-double);
    border: var(--border);
    border-radius: var(--border-radius);
  }

  /* The door wears .row__title's weight and .txt-medium's step; its hover
     is the one title hover, listed in rows.css. Only the rest state is its
     own: no underline until the pointer says so. */
  .question-card__door {
    text-decoration: none;
  }

  /* The preview lines whisper at the dock tile's scale wherever they appear —
     the index card and the tile share them (questions/_latest), so the
     retune lives on the class rather than on either surface. */
  .question-card__latest {
    --avatar-size: 1.25rem;
  }
}