@layer components {
  /* The stays, one row each — on a .screen, in a .screen__card, with .table
   * doing the cells. What is here is only what belongs to a booking.
   *
   * Eight columns rather than the properties list's nine, and the same
   * arrangement: the guest column takes what the figures and dates do not, down
   * to a floor, and everything else sizes to its content.
   */
  .booking-table {
    /* Two lines — a name and the channel's number under it — beside a mark. */
    --booking-table-guest-width: 14rem;

    th:first-child,
    td:first-child {
      min-inline-size: var(--booking-table-guest-width);
    }
  }

  /* One row. The first cell is .row-identity, which the properties list wears
   * too; what is left here is what belongs to a stay.
   *
   * The guest's name is the one link, and it opens the stay overlay. It reads
   * as the name rather than as a link until it is pointed at, because eight
   * columns of underlines is a table nobody can read. */
  .booking-row__guest {
    color: inherit;
    text-decoration: none;
  }

  .booking-row__guest:hover {
    text-decoration: underline;
  }

  .booking-row__channel {
    color: var(--color-ink-soft);
    white-space: nowrap;
  }

  .booking-row__day {
    white-space: nowrap;
  }

  /* One end of a stay, wherever one is written — the list's two columns and the
     overlay's two ends both render bookings/_day. Its own block rather than the
     row's, because a .booking-row__ class inside a dialog is a name that lies
     about where the element is. */
  .booking-day {
    white-space: nowrap;
  }

  /* Today and tomorrow, which are the two days somebody is scanning a column of
     these for. Heavier and in full ink, so the eye finds them without reading
     the dates around them. */
  .booking-day--near {
    color: var(--color-ink);
    font-weight: var(--weight-semibold);
  }

  /* Columns leave in the order they can be spared, at the app's own two bands.
   *
   * The same small answer the properties list gives, and the same cost said out
   * loud: a phone cannot usefully scroll eight columns, so below the wide band
   * the channel and the night count go, and below the small band so does the
   * check-out. What is left is who, where, when they arrive, where the stay is
   * and what it pays — which is the whole of what a phone is opened for here.
   * The real answer is a stacked variant of .table; see COMPONENTS.md. */
  @media (width < 60rem) {
    .booking-row__channel,
    .booking-row__nights {
      display: none;
    }
  }

  @media (width < 40rem) {
    .booking-row__day--departure {
      display: none;
    }
  }
}