/* ============================================================================
   Booking page. Additions only; every colour, radius and type size comes from
   the tokens in site.css.

   The slot grid is the whole page. It has to be readable at 320px, hit a 44px
   touch target, and never reflow when the day list refreshes after a slot is
   taken from under someone.
   ============================================================================ */

.bk-grid {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--s7, 88px); align-items: start;
}
@media (max-width: 960px) { .bk-grid { grid-template-columns: 1fr; gap: var(--s6, 64px); } }
/* On a phone the aside is context, not the task, so it follows the picker. */
@media (max-width: 960px) { .bk-aside { order: 2; } }

.bk-step + .bk-step { margin-top: var(--s6, 64px); }
.bk-step h2 { margin-bottom: var(--s4, 32px); }

.bk-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------ time zone */

.bk-tz {
  background: var(--tint-1, #F3F7FA); border-radius: var(--radius, 4px);
  padding: var(--s3, 24px); font-size: 16px; color: var(--ink-muted, #4E6377);
  margin-bottom: var(--s4, 32px);
}
.bk-tz b { color: var(--navy, #0E2A45); }
.bk-linkbtn {
  background: none; border: 0; padding: 4px 0; margin-left: 10px;
  font: inherit; font-weight: 700; color: var(--accent, #07595F);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  min-height: 44px;
}
.bk-linkbtn:hover { color: var(--accent-hi, #0B7A82); }
#tzpicker { margin-top: var(--s2, 16px); }
#tzsearch {
  width: 100%; font-family: var(--font-body); font-size: 16px;
  border: 2px solid var(--rule, #D2DEE7); border-radius: var(--radius, 4px);
  padding: 12px var(--s2, 16px); min-height: 50px; background: #FFFFFF;
}
#tzresults { max-height: 260px; overflow-y: auto; margin-top: 10px; }
.tzopt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: #FFFFFF; border: 1px solid var(--rule, #D2DEE7);
  border-radius: var(--radius, 4px); padding: 11px var(--s2, 16px);
  margin-bottom: 6px; font: inherit; font-size: 15.5px;
  color: var(--ink-muted, #4E6377); min-height: 46px;
}
.tzopt b { color: var(--navy, #0E2A45); }
.tzopt:hover { border-color: var(--accent-hi, #0B7A82); background: var(--tint-2, #EAF4F4); }

/* --------------------------------------------------------------- slots */

.bk-msg {
  background: var(--tint-1, #F3F7FA); border-left: 3px solid var(--accent-hi, #0B7A82);
  padding: var(--s3, 24px); font-size: 16.5px; color: var(--ink-muted, #4E6377);
  max-width: none; margin: 0;
}

.bk-day { padding: var(--s4, 32px) 0; border-bottom: 1px solid var(--rule, #D2DEE7); }
.bk-day:first-child { padding-top: 0; }
.bk-day-label {
  font-family: var(--font-head); font-weight: 700; font-size: 18px;
  color: var(--navy, #0E2A45); margin-bottom: var(--s3, 24px);
}
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.bk-slot {
  font-family: var(--font-body); font-size: 16.5px; font-weight: 700;
  min-height: 52px; padding: 12px 10px; cursor: pointer;
  background: #FFFFFF; color: var(--navy, #0E2A45);
  border: 2px solid var(--rule, #D2DEE7); border-radius: var(--radius, 4px);
  font-variant-numeric: tabular-nums;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}
.bk-slot:hover { border-color: var(--accent-hi, #0B7A82); background: var(--tint-2, #EAF4F4); }
.bk-slot[aria-pressed="true"] {
  background: var(--accent, #07595F); border-color: var(--accent, #07595F); color: #FFFFFF;
}
@media (max-width: 420px) {
  .bk-slots { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .bk-slot { font-size: 15.5px; min-height: 48px; }
}

/* ---------------------------------------------------------------- form */

.bk-pick {
  background: var(--accent-soft, #D9EDEE); border-radius: var(--radius, 4px);
  padding: var(--s3, 24px); font-size: 17.5px; color: var(--navy, #0E2A45);
  margin-bottom: var(--s5, 48px); max-width: none;
}
.bk-pick b { font-family: var(--font-head); }

.bk-toggle { display: flex; gap: 10px; flex-wrap: wrap; }
.bk-toggle button {
  flex: 1 1 140px; min-height: 52px; cursor: pointer;
  font-family: var(--font-body); font-size: 16.5px; font-weight: 700;
  background: #FFFFFF; color: var(--navy, #0E2A45);
  border: 2px solid var(--rule, #D2DEE7); border-radius: var(--radius, 4px);
}
.bk-toggle button[aria-pressed="true"] {
  background: var(--accent, #07595F); border-color: var(--accent, #07595F); color: #FFFFFF;
}

#ts { margin-bottom: var(--s3, 24px); }
#ts:empty { margin-bottom: 0; }

/* ---------------------------------------------------------------- done */

.bk-done {
  background: var(--tint-2, #EAF4F4); border-radius: var(--radius, 4px);
  padding: var(--s6, 64px) var(--s5, 48px);
}
.bk-done p { color: var(--ink-muted, #4E6377); }
.bk-when {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px); color: var(--navy, #0E2A45) !important;
  margin-top: var(--s3, 24px);
}
@media (max-width: 560px) { .bk-done { padding: var(--s5, 48px) var(--s4, 32px); } }