@layer components {
  /* Who or what a table row is about: a mark, a name, and a quiet line under it.
   *
   * The first cell of both list screens, and COMPONENTS.md files the shape under
   * "shared by nature — Display: list row". It was written twice in one branch,
   * once named after each model, which is the drift this exists to stop: whoever
   * changes what a record's identity looks like in a table should not have to
   * know there are two of them in two stylesheets.
   *
   * Not .property-identity, which is a different thing wearing a similar name —
   * a photo, a name and an address, standing in a workspace rail rather than in
   * a cell.
   *
   * The link declarations are here rather than on a modifier because a cell is
   * either wholly a link or wholly not, and a span ignores both of them. The
   * properties list makes the whole cell the target; the bookings list has no
   * screen to send anybody to yet.
   */
  .row-identity {
    --row-identity-image-size: 2.5rem;

    display: flex;
    align-items: center;
    gap: var(--space-three-quarters);
    color: inherit;
    text-decoration: none;
  }

  .row-identity__image {
    inline-size: var(--row-identity-image-size);
    block-size: var(--row-identity-image-size);
    flex: none;
    border-radius: var(--radius);
    object-fit: cover;
  }

  /* A grid rather than a stack, so the two lines are two rows without either of
     them naming a height. */
  .row-identity__detail {
    display: grid;
    min-inline-size: 0;
  }

  .row-identity__name {
    font-weight: var(--weight-semibold);
  }

  /* The line under the name: where a property is, what a stay costs. */
  .row-identity__meta {
    color: var(--color-ink-soft);
    font-size: var(--text-normal);
  }

  /* The same line when it holds a code rather than words — a booking number off
     a confirmation email, checked character by character against the screen.
     That is what --font-mono is for, and a step smaller because it is a
     reference rather than something being read. */
  .row-identity__code {
    color: var(--color-ink-soft);
    font-family: var(--font-mono);
    font-size: var(--text-x-small);
  }
}