/* The public booking page after a time has been chosen: the bar across the
   top, the details form beside what was picked, and the confirmation. */
/* The bar every booking screen carries: who this is, and the address it was
   opened at. */
.booking-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 16px;
  padding-bottom: 24px;
}

.booking-bar .wordmark {
  display: inline-flex;
  align-items: baseline;
  column-gap: 8px;
}

.booking-bar .wordmark img {
  height: 18px;
  width: auto;
}

.booking-bar .wordmark span {
  font: var(--t-body-small-300);
  color: var(--c-neutral-9);
}

.booking-address {
  font: var(--t-code-300);
  color: var(--c-neutral-7);
  overflow-wrap: anywhere;
}

/* B2: what was chosen on the left, what to type on the right. */
.details-columns {
  display: grid;
  grid-template-columns: 280px minmax(0, 420px);
  column-gap: 48px;
  align-items: start;
}

.details-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 16px;
}

.chosen-card {
  border: 1px solid var(--c-neutral-3);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  row-gap: 6px;
}

.chosen-card h2 {
  font: var(--t-h8-500);
  color: var(--c-white);
  margin: 0 0 6px;
}

.chosen-day,
.chosen-time {
  font: var(--t-body-small-500);
  color: var(--c-white);
  margin: 0;
}

.details-form {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

.details-actions {
  display: flex;
  align-items: center;
  column-gap: 16px;
}

.details-actions .fine-print {
  max-width: 200px;
}

.details-form .screen-title {
  font: var(--t-h8-500);
}

/* B3: one column, centred, with the facts in a card. */
.booked-column .modal-heading {
  display: flex;
  align-items: center;
  column-gap: 10px;
}

.booked-column {
  max-width: 520px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

.booked-card {
  border: 1px solid var(--c-neutral-3);
  border-radius: 12px;
  padding: 20px 24px;
}

.booked-card h3 {
  font: var(--t-body-primary-500);
  color: var(--c-white);
  margin: 0 0 16px;
}

.booked-facts {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  margin: 0;
}

.booked-facts > div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  column-gap: 16px;
}

.booked-facts dt {
  font: var(--t-body-small-300);
  color: var(--c-neutral-9);
}

.booked-facts dd {
  margin: 0;
  font: var(--t-body-small-400);
  color: var(--c-white);
  overflow-wrap: anywhere;
}

.booked-calendar {
  display: flex;
  align-items: center;
  column-gap: 12px;
  flex-wrap: wrap;
}

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

/* B3 on a phone (board 45): the label sits above the three calendar buttons,
   not beside them, and they share the width. Beside them it leaves the row
   narrower than the three pills want. */
@media (max-width: 640px) {
  .booked-calendar {
    flex-direction: column;
    align-items: stretch;
    row-gap: 8px;
  }

  .booked-calendar .pill-row {
    display: flex;
    column-gap: 8px;
  }

  .booked-calendar .pill-row > * {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
  }
}

/* B2 on a phone (board 44): the action is a full-width button on its own row.
   Side by side with the sentence, as the desktop draws it, there is not enough
   width left for the label and "Book the meeting" breaks across two lines
   inside the button. */
@media (max-width: 640px) {
  .details-actions {
    flex-direction: column;
    align-items: stretch;
    row-gap: 12px;
  }

  .details-actions .button {
    width: 100%;
    height: 48px;
  }

  /* The board does not show this sentence at 390. It is not dropped here -
     removing something a page says is not a styling decision - so it sits
     under the button instead of beside it. See SPEC-CHANGES O17. */
  .details-actions .fine-print {
    max-width: none;
  }
}

/* B4: the booking as it stands, above the month it could move into. */
.current-card {
  border: 1px solid var(--c-neutral-3);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  row-gap: 6px;
  margin-bottom: 8px;
}

.current-card h2 {
  font: var(--t-h8-500);
  color: var(--c-white);
  margin: 0;
}

.eyebrow-warn {
  color: var(--c-orange);
}

/* The old time stays visible, struck through: replacing it silently leaves
   somebody unsure which of the two they are looking at. */
.struck {
  font: var(--t-body-small-400);
  color: var(--c-neutral-9);
  text-decoration: line-through;
  margin: 0;
}

.required-note {
  font: var(--t-body-small-300);
  font-style: normal;
  color: var(--c-red);
  margin-left: 4px;
}

/* A link inside a sentence reads as part of it. */
[data-booked-mail] .link {
  font: inherit;
}