/* arvindtogra.com: the booking page. The tokens, the header and the keys come from site.css. */

.page-book {
  min-height: 100svh;
  background:
    radial-gradient(45% 38% at 88% 100%, rgb(255 226 176 / 0.8), rgb(255 226 176 / 0) 70%),
    linear-gradient(180deg, #A7C9EA 0%, #C3DAF0 24%, #DFE8F1 50%, #F2E4DE 76%, #F8D5C3 100%);
}

/* a column, so the credit sits at the bottom of the screen however short the card is */
.page-book { display: flex; flex-direction: column; }
.book { flex: 1 0 auto; padding: 7.25rem var(--gutter) 3rem; }

/* One frosted card: who and how long on the left; the day, the time and the details on the right */
.book-card {
  --card-pad: clamp(1.25rem, 3vw, 2.25rem);
  position: relative;
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr);
  column-gap: clamp(1.75rem, 3.5vw, 3.25rem);
  align-items: start;
  width: min(var(--max), 100%);   /* the frame: the card's edges are the header's */
  margin-inline: auto;
  padding: var(--card-pad);
  border: 1px solid rgb(255 255 255 / 0.9);
  border-radius: 1.75rem;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.62));
  box-shadow: var(--glass-shadow), inset 0 1px 0 #FFFFFF;
}
.book-about { grid-column: 1; grid-row: 1 / span 2; }

/* The way out: a round × in the card's top right corner, centred on its first line (the photo, and the
   titles of the columns beside it, are 3.25rem tall). The titles that reach that corner keep clear of it. */
.book-close {
  position: absolute;
  top: calc(var(--card-pad) + 0.375rem);
  right: calc(var(--card-pad) - 0.45rem);   /* the × itself, not its round hover, on the content's edge */
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: var(--ink-2);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.book-close:hover { background: rgb(18 35 60 / 0.07); color: var(--ink); }
.book-close:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.book-close svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* its name under it, on hover and on keyboard focus */
.book-close::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  padding: 0.3rem 0.6rem;
  border-radius: 0.5rem;
  background: var(--navy);
  color: #FFFFFF;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
.book-close:focus-visible::after { opacity: 1; transform: none; }
@media (hover: hover) {
  .book-close:hover::after { opacity: 1; transform: none; }
}
.times-day,
.form-title { padding-right: 2.75rem; }
.book-step,
.book-status { grid-column: 2; }
.book-step[hidden],
.book-options[hidden] { display: none; }

.book-host { display: flex; align-items: center; gap: 0.75rem; }
.book-face {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(180deg, #A7C9EA, #F8D5C3);
  box-shadow: 0 0 0 2px #FFFFFF, 0 8px 16px -8px rgb(18 35 60 / 0.55);
}
.book-name { color: var(--ink-2); font-weight: 650; }
.book-about h1 {
  margin-top: 1.1rem;
  font-size: clamp(2rem, 3.3vw, 2.3rem);   /* "Book a meeting" on one line in the card's left column */
  font-weight: 680;
  font-stretch: 104%;
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.book-lead { margin-top: 0.75rem; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }

.book-options {
  display: grid;
  gap: 1.15rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(18 35 60 / 0.09);
}
.lengths { min-width: 0; margin: 0; padding: 0; border: 0; }
.lengths legend,
.zone-pick > span {
  display: block;
  margin-bottom: 0.55rem;
  padding: 0;
  color: var(--ink-3);
  font-size: 0.875rem;
  font-weight: 600;
}
.lengths-keys { display: flex; gap: 0.5rem; }
.lengths input,
.call-keys input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.lengths .key:has(input:focus-visible),
.call-keys .key:has(input:focus-visible) { outline: 2px solid var(--navy); outline-offset: 3px; }

.zone-pick { display: block; }
.zone-pick select,
.field input,
.field textarea {
  width: 100%;
  border: 1px solid #CBD6E3;
  border-radius: 0.8rem;
  background-color: #FFFFFF;
  box-shadow: inset 0 2px 3px rgb(18 35 60 / 0.08);
  color: var(--ink);
  font: inherit;
}
.zone-pick select {
  min-height: 2.75rem;
  padding: 0.5rem 2.2rem 0.5rem 0.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%233E516B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 0.85rem center;
  background-repeat: no-repeat;
  background-size: 0.75rem;
  font-size: 0.9375rem;
  appearance: none;
  cursor: pointer;
}
.zone-pick select:focus-visible,
.field input:focus-visible,
.field textarea:focus-visible {
  border-color: transparent;
  border-radius: 0.8rem;
  outline: 2px solid var(--navy);
  outline-offset: 1px;
}

/* ---------- the day and the time ---------- */
.book-pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2.25rem;
  align-items: start;
}
/* The titles at the top of the three columns (Arvind's name, the month, the day) are each centred in a
   line as tall as his photo, so they share one baseline */
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.25rem;
  margin-bottom: 0.9rem;
}
.cal-month,
.times-day,
.form-title { margin: 0; font-size: 1.125rem; font-weight: 650; letter-spacing: -0.01em; }
.cal-nav { display: flex; gap: 0.45rem; }
.cal-nav .key { width: 2.25rem; min-height: 2.25rem; }
.cal-nav .key svg { width: 1.1rem; height: 1.1rem; stroke-width: 2; }
.cal-nav .key:disabled {
  opacity: 0.35;
  transform: none;
  box-shadow: 0 1px 0 #C6D1DF;
  cursor: default;
}

.cal-grid { display: grid; grid-template-columns: repeat(7, 2.7rem); gap: 0.45rem 0.4rem; }
.cal-dow {
  padding-bottom: 0.15rem;
  color: var(--ink-3);
  font-size: 0.75rem;
  font-weight: 650;
  text-align: center;
}
.cal-day {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.cal-day.is-off { color: rgb(18 35 60 / 0.3); font-weight: 500; }
.cal-day.is-today { position: relative; }
.cal-day.is-today::after {
  content: "";
  position: absolute;
  bottom: 0.32rem;
  left: 50%;
  width: 0.25rem;
  height: 0.25rem;
  margin-left: -0.125rem;
  border-radius: 50%;
  background: currentColor;
}

.times-day { display: flex; align-items: center; min-height: 3.25rem; margin-bottom: 0.9rem; }
.times-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr));
  gap: 0.65rem;
  max-height: 21.5rem;
  margin: -0.3rem -0.4rem 0;
  padding: 0.3rem 0.4rem 0.6rem;
  overflow-y: auto;
}
.slot { width: 100%; font-variant-numeric: tabular-nums; }
.times-empty { color: var(--ink-2); }

/* while the free times load */
.book-card[aria-busy="true"] .book-pick { opacity: 0.55; pointer-events: none; }
.book-pick { transition: opacity 0.2s ease; }

/* ---------- the details ---------- */
.book-form { display: grid; gap: 1.2rem; }
.form-title { display: flex; align-items: center; min-height: 3.25rem; }
.chosen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: 1rem;
  background: rgb(255 255 255 / 0.75);
  box-shadow: inset 0 1px 3px rgb(18 35 60 / 0.1);
}
.chosen-when { font-weight: 620; }

/* the video call: keys like the lengths', in a row; where the row doesn't fit, one key to a line, full
   width. The widths below are the rows' own (24rem for all three keys, 18.7rem for Google Meet and
   Microsoft Teams, 13.5rem for Google Meet and Zoom), with a little to spare. */
.call-pick { min-width: 0; margin: 0; padding: 0; border: 0; }
.call-pick[hidden],
.call-keys .key[hidden] { display: none; }
.call-pick legend {
  display: block;
  margin-bottom: 0.45rem;
  padding: 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 600;
}
.call-keys { display: flex; flex-wrap: wrap; gap: 0.65rem 0.5rem; container-type: inline-size; }
@container (max-width: 24.5rem) {
  .call-keys:not(:has(> .key[hidden])) > .key { flex: 1 0 100%; }
}
@container (max-width: 19.25rem) {
  .call-keys:has(> .key[hidden] > [value="zoom"]) > .key { flex: 1 0 100%; }
}
@container (max-width: 14rem) {
  .call-keys > .key { flex: 1 0 100%; }
}
.text-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--navy);
  font: inherit;
  font-weight: 620;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.field { display: grid; align-content: start; gap: 0.4rem; }
.field-wide { grid-column: 1 / -1; }
.field > span:first-child { color: var(--ink-2); font-size: 0.9375rem; font-weight: 600; }
.field em { color: var(--ink-3); font-style: normal; font-weight: 500; }
.field input,
.field textarea { padding: 0.7rem 0.9rem; font-size: 1rem; }
.field textarea { min-height: 6.5rem; resize: vertical; }
.field [aria-invalid="true"] { border-color: #C0392B; }
.field-error { color: #B42318; font-size: 0.875rem; font-weight: 550; }
.field-error:empty { display: none; }
.website-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.book-form .btn { justify-self: start; }
.book-form .btn:disabled { opacity: 0.75; cursor: progress; transform: none; }

/* ---------- booked ---------- */
.book-done,
.book-off { display: grid; justify-items: start; gap: 0.75rem; }
.done-mark { width: 3.25rem; height: 3.25rem; fill: #E5F3EA; stroke: #1E8049; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.done-title,
.off-title { font-size: clamp(1.6rem, 2.6vw, 2rem); font-weight: 680; line-height: 1.1; letter-spacing: -0.03em; }
.done-when { font-size: 1.125rem; font-weight: 620; }
.done-note,
.book-off p { color: var(--ink-2); }
.done-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 0.75rem; }
.done-title:focus,
.off-title:focus,
.form-title:focus { outline: none; }

/* ---------- messages ---------- */
.book-status { min-height: 1.5em; margin-top: 1.1rem; color: var(--ink-2); font-size: 0.9375rem; }
.book-status:empty { margin-top: 0; }
.book-status.is-error { color: #B42318; font-weight: 550; }
.book-status .text-button { margin-left: 0.4rem; }

/* ---------- narrower screens ---------- */
@media (max-width: 62rem) {
  .book-card { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }
  .book-host { padding-right: 2.75rem; }   /* now the first line, under the × */
  .book-about,
  .book-step,
  .book-status { grid-column: 1; grid-row: auto; }
  .book-options { grid-template-columns: auto minmax(0, 18rem); align-items: end; gap: 1.5rem; }
  .book-status { margin-top: -0.75rem; }
}
@media (max-width: 47.5rem) {
  .book { padding-top: 9.5rem; }
}
@media (max-width: 40rem) {
  .book { padding-inline: var(--gutter); }
  .book-card { --card-pad: 1.15rem; border-radius: 1.4rem; }
  .book-pick { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .cal-day { justify-self: center; width: min(100%, 2.75rem); height: auto; aspect-ratio: 1; }
  .times-list { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: none; overflow: visible; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .book-options { grid-template-columns: minmax(0, 1fr); }
  .book-about h1 { margin-top: 0.9rem; }
}