/* The public booking page. Same ground, same hairlines as the guest entry in
   module 1 - this is the same kind of screen: somebody outside the company,
   once, before a call. */

.booking {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 28px 64px;
  display: flex;
  flex-direction: column;
  row-gap: 28px;
}

.booking-head {
  display: flex;
  column-gap: 16px;
  align-items: flex-start;
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--c-neutral-3);
}

.booking-head h1 {
  font: var(--t-h4-300);
  letter-spacing: var(--ls-h4);
  color: var(--c-white);
  margin: 4px 0 8px;
}

.who-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-neutral-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--t-body-small-500);
  color: var(--c-neutral-11);
  flex: none;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.pill-flat {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--c-neutral-3);
  font: var(--t-body-small-300);
  color: var(--c-neutral-9);
}

.booking-columns {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  column-gap: 40px;
  align-items: start;
}

.booking-calendar,
.booking-slots {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}

.slots-wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The chosen time and its Confirm share the one cell the time already had, as
   on the design. Two cells of the grid would push every later time along by
   one and break the row wherever the chosen slot happened to fall. */
.slot-chosen {
  display: flex;
  column-gap: 8px;
  height: 42px;
}

.slot-chosen-time {
  background: var(--c-neutral-1);
  border-color: var(--c-neutral-7);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
}

.slot-confirm {
  height: 42px;
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
}

.booking-footer {
  padding-top: 24px;
  border-top: 1px dashed var(--c-neutral-3);
  text-align: center;
}

.screen-title {
  font: var(--t-h6-500);
  color: var(--c-white);
  margin: 0;
}

@media (max-width: 900px) {
  .booking-columns {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
  }

  .slots-wide {
    grid-template-columns: minmax(0, 1fr);
  }
}

.slots .slot,
.slots .slot-confirm {
  height: 42px;
}

/* A team page: the hosts as overlapping circles, and the note that says why
   there are fewer slots than on a personal page. */
.avatar-stack {
  display: flex;
  flex: none;
}

.avatar-stack .who-circle {
  margin-right: -8px;
  border: 1px solid var(--surface-page);
}

.who-circle-more {
  background: var(--c-neutral-2);
  color: var(--c-neutral-11);
}

.slots-note {
  display: flex;
  column-gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--c-neutral-3);
  border-radius: 10px;
  font: var(--t-body-small-300);
  color: var(--text-body);
}

.slots-note::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--c-green);
  flex: none;
}

/* The one pill that is a warning rather than a fact about the meeting. */
.pill-transcribed {
  border-color: var(--c-orange-darker);
  color: var(--c-orange);
}

/* G7: the notice above the name field. The same red dot the call uses, so
   the two read as one thing. */
.transcribed-notice {
  margin-top: 24px;
  align-items: flex-start;
}

.transcribed-notice .dot-recording {
  margin-top: 6px;
}