@layer components {
  /* One stay, as an overlay — the calendar's booked nights open it, and whatever
   * asks next will too.
   *
   * It brings no surface of its own: it is the body of a .dialog, so the
   * elevation, the radius, the backdrop and the column that makes only the body
   * scroll are all the primitive's. What is here is the arrangement of a stay
   * inside one. The class sits on the body rather than on the dialog because that
   * is where every token below is spent, and because `variant` on shared/_dialog
   * means a modifier rather than a slot for a block name.
   *
   * The sections are .panel--quiet.panel--flush: outlined rather than raised,
   * because a shadow inside a dialog is a card on a card, and unpadded because
   * each one brings its own strip and its own rows. Nothing here restates a
   * panel's border, radius or background.
   */
  .booking-detail {
    /* The identity block is centred and the sections under it are not, so the
       one measure they share is the gutter their rows sit in. Named after this
       block because it is this block's decision: the sections are panels, and a
       panel has no opinion about what a row inside it is inset by. */
    --booking-detail-gutter: var(--space-and-quarter);
    --booking-detail-row-gap: var(--space-three-quarters);
  }

  /* Who is staying. The one centred thing in the app, and deliberately: an
     overlay about one person has a subject, where every list and every form has
     a column of things to line up. */
  .booking-detail__identity {
    display: grid;
    justify-items: center;
    gap: var(--space-quarter);
    text-align: center;
    padding-block: var(--space-quarter) var(--space-half);
  }


  /* The name carries the air between itself and the mark above it, rather than the
     mark carrying it: the gap this grid runs on is the gap between lines of text,
     and a circle needs more than a line does. On this element because it is ours
     — a rule reaching into .avatar to space it is what makes a primitive
     impossible to change later. */
  .booking-detail__who {
    margin: var(--space-quarter) 0 0;
    font-size: var(--text-large);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
  }

  .booking-detail__when {
    margin: 0;
    color: var(--color-ink-soft);
  }

  /* The property, the channel, and the channel's own number for the stay. Wraps
     rather than truncates: a name is the value here most likely to be long, and
     an elided property is one nobody can identify. */
  .booking-detail__origin {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-quarter) var(--space-half);
    margin: 0;
    font-size: var(--text-normal);
  }

  /* Undecorated until it is pointed at, the same as the bookings list's one
     link: an underline in a line of three facts reads as the only one that
     matters. */
  .booking-detail__where {
    color: var(--color-ink);
    font-weight: var(--weight-medium);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  .booking-detail__channel {
    color: var(--color-ink-soft);
  }

  /* A reference is looked up rather than read, so it recedes and sets in
     tabular figures — somebody is comparing it against a confirmation email
     character by character. */
  .booking-detail__reference {
    color: var(--color-ink-faint);
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
  }

  .booking-detail__separator {
    color: var(--color-ink-faint);
  }

  /* A section of the stay. The panel supplies the outline; this supplies the
     column its parts stack in.
   *
     These are what found the track-sizing defect now fixed in dialog.css: three
     boxes with `overflow: hidden` in one .dialog__body, each clipping its own last
     row — the guest count, and the caveat under the figures. Worth knowing before
     putting a fourth one in here. */
  .booking-detail__section {
    display: grid;
    align-content: start;
  }

  /* The strip across the top of a section, which is also where a section's own
     control sits — the breakdown's two sides. Tinted as well as ruled, and the
     same tint as a table's header, for the reason table.css gives: small grey
     capitals over the same white as what is under them read as a first row with
     something wrong with it. */
  .booking-detail__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-half);
    /* Whatever is in it, which is a label on two of the three sections and a
       label beside a control on the other. A floor would only make the two short
       ones as tall as the tall one, and the strip is a label rather than a band
       that has to line up with a strip beside it. */
    padding: var(--space-half) var(--booking-detail-gutter);
    border-block-end: var(--border-faint);
    background: var(--surface-quiet);
  }

  /* The same micro-type as a table's column head and a sidebar's section label:
     uppercase, the smallest step, and quiet with it. Medium rather than bold —
     .badge--status is the loud one of these three, and it has a filled pill to
     be loud inside. */
  .booking-detail__heading {
    margin: 0;
    font-size: var(--text-xx-small);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-ink-soft);
  }

  /* Arrival and departure, read across rather than down: one is where the stay
     starts and the other where it ends, and a list would make them two
     unrelated facts. The rule between them is the divider the pair needs and
     the only one, so it is drawn on the second rather than as a border on both. */
  .booking-detail__ends {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: var(--space) var(--booking-detail-gutter);
  }

  .booking-detail__end {
    display: grid;
    gap: var(--space-eighth);
  }

  /* The departing end reads to the inside edge, so the two of them meet at the
     rule between them and the pair reads as one span rather than two columns. */
  .booking-detail__end--departure {
    padding-inline-start: var(--space);
    border-inline-start: var(--border-faint);
    text-align: end;
  }

  .booking-detail__end-name {
    margin: 0;
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--color-ink-soft);
  }

  .booking-detail__end-day {
    margin: 0;
    font-size: var(--text-medium);
    font-weight: var(--weight-bold);
  }

  .booking-detail__end-time {
    margin: 0;
    font-size: var(--text-small);
    color: var(--color-ink-soft);
  }

  /* The rows a section ends in: a term and its value, ruled off from each other
     the way a table's rows are. Faint, because these sit inside one outline —
     at the weight of the outline itself a section of three facts stops reading
     as facts and starts reading as a grid. */
  .booking-detail__rows {
    display: grid;
    margin: 0;
  }

  .booking-detail__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space);
    padding: var(--booking-detail-row-gap) var(--booking-detail-gutter);

    &:not(:last-child) {
      border-block-end: var(--border-faint);
    }

    dt {
      color: var(--color-ink-soft);
    }

    dd {
      margin: 0;
      font-weight: var(--weight-semibold);
      font-variant-numeric: tabular-nums;
    }
  }

  /* What the stay is worth, and the figure somebody opened it to see. Large
     enough to be read from where they are sitting, and tabular so a column of
     these compares — which is what makes the currency beside it small: it
     qualifies the number rather than being part of it, and $ alone is three
     currencies. */
  .booking-detail__amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-quarter);
    margin: 0;
    padding: var(--space-and-quarter) var(--booking-detail-gutter) var(--space-half);
    font-size: var(--text-x-large);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tighter);
    font-variant-numeric: tabular-nums;
  }

  .booking-detail__currency {
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-normal);
    color: var(--color-ink-soft);
  }

  /* The caveat under a breakdown that does not add up, and it is part of the
     figures rather than a footnote to them: whoever reads the total reads this. */
  .booking-detail__note {
    margin: 0;
    padding: var(--space-three-quarters) var(--booking-detail-gutter);
    border-block-start: var(--border-faint);
    font-size: var(--text-x-small);
    color: var(--color-ink-soft);
  }

  /* The guest's own words, which is the one thing in here that is prose. */
  .booking-detail__prose {
    padding: var(--space) var(--booking-detail-gutter);
    color: var(--color-ink-soft);
  }

  /* Below the small band the two ends stop being a pair: at a phone's width each
     column is too narrow for "Check-out" and a date, so they stack and the rule
     between them becomes a rule under the first. */
  @media (width < 40rem) {
    .booking-detail__ends {
      grid-template-columns: 1fr;
      gap: var(--space);
    }

    .booking-detail__end--departure {
      padding-inline-start: 0;
      padding-block-start: var(--space);
      border-inline-start: 0;
      border-block-start: var(--border-faint);
      text-align: start;
    }
  }
}