/* Detail list: a dl of label and value rows — an account's email and phone,
   a guest's name on a ticket. Quiet labels on the left, values on the right,
   a hairline between rows.

   <dl class="detail-list">
     <div><dt>E-Mail</dt><dd>…</dd></div>
   </dl> */
.detail-list {
  display: flex;
  flex-direction: column;

  & > div {
    align-items: baseline;
    display: flex;
    gap: var(--space-xs);
    justify-content: space-between;
    padding-block: var(--space-2xs);
  }

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

  dt {
    color: var(--color-muted);
    flex-shrink: 0;
  }

  dd {
    font-weight: var(--weight-medium);
    min-inline-size: 0;
    overflow-wrap: anywhere;
    text-align: end;
  }
}