/* Entry list: a card of linked rows — a customer's orders, lounge bookings.
   Each row: a tile, the title over a quiet line, a figure on the right and a
   chevron. Rows part with a hairline and light up on hover.

   <ul class="entry-list" role="list">
     <li><a class="entry-list__row" href="…">
       <span class="icon-tile">…</span>
       <span class="entry-list__lines">
         <span class="entry-list__title">…</span>
         <span class="entry-list__meta">…</span>
       </span>
       <span class="entry-list__figure">…</span>
       <span class="icon icon--chevron-right"></span>
     </a></li>
   </ul> */
.entry-list {
  background: var(--color-surface-1);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;

  & > li + li {
    border-block-start: var(--border-width) solid var(--color-subtle);
  }
}

.entry-list__row {
  align-items: center;
  color: var(--color-text);
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-s) var(--space-s-m);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out);

  &:hover {
    background: var(--color-surface-2);
  }

  & > .icon {
    --icon-color: var(--color-muted);

    flex-shrink: 0;
  }
}

.entry-list__lines {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3xs);
  line-height: var(--leading-snug);
  min-inline-size: 0;
}

.entry-list__title {
  font-weight: var(--weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-list__meta {
  color: var(--color-muted);
  font-size: var(--step--1);
}

.entry-list__figure {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}