@layer components {
  /* A stay, as two dated tiles with an arrow between them.
   *
   * A tile rather than a line of text, because a stay is the one date pair in
   * this product that is read at a glance rather than checked: the shape says
   * "arrive here, leave there" before any character in it has been read. A rate
   * span or an audit timestamp is the opposite case and stays as text.
   *
   * Here rather than inside the screen that needed it first, for the reason the
   * avatar is: the inbox wanted one, the bookings screens will want the same
   * one, and a second version of a thing this small is the version that ends up
   * disagreeing about which end of the range is which.
   */
  .date-range {
    --date-range-tile-width: 3.25rem;

    display: flex;
    align-items: center;
    gap: var(--space-quarter);
  }

  /* A month band over a day, which is a tear-off calendar page and reads as one
     without a picture of one. The radius is clipped by overflow rather than
     restated on each half, so the two bands cannot disagree about the corner.
     The band is the accent as ink on its own tint rather than as a fill: two
     solid green blocks are the loudest thing in a column whose job is to be
     glanced at, and this palette puts the accent on a tint everywhere else. */
  .date-range__date {
    display: grid;
    flex: none;
    inline-size: var(--date-range-tile-width);
    border: var(--border);
    border-radius: var(--radius-small);
    overflow: hidden;
    text-align: center;
    line-height: var(--leading-none);
  }

  .date-range__month {
    padding-block: var(--space-quarter);
    border-block-end: var(--border);
    background: var(--surface-sunk);
    color: var(--color-accent);
    font-size: var(--text-xx-small);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  .date-range__day {
    padding-block: var(--space-quarter);
    background: var(--color-canvas);
    font-size: var(--text-medium);
    font-weight: var(--weight-bold);
    /* So the 1 in an 11th is the width of the 8 in an 18th and the two tiles are
       the same size whatever dates are in them. */
    font-variant-numeric: tabular-nums;
  }

  .date-range__arrow {
    display: inline-flex;
    flex: none;
    color: var(--color-ink-soft);
  }
}