/* Book a call: what auth_splash.css has no part for (the kinds, the faces,
   the calendar, the times). The page itself is the sign-in splash
   (devise/shared/splash): its panel, type, fields and buttons, so booking is
   the same front door as signing in. Colours only through the splash's
   --as-* roles, so dark mode follows it; brand tokens underneath. */

.bk-step { margin-top: 24px; }
.bk-step-title { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--as-muted); }

/* What: four tiles, two by two. */
.bk-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bk-kind { display: flex; flex-direction: column; gap: 2px; min-height: 64px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--as-field-border); background: var(--as-field); text-decoration: none; transition: border-color .15s, background-color .15s; }
.bk-kind:hover { border-color: var(--as-link); }
.bk-kind-title { font-size: 15px; font-weight: 700; color: var(--as-ink); }
.bk-kind-meta { font-size: 12px; color: var(--as-muted); }
.bk-kind[aria-current="true"] { border: 2px solid var(--as-link); padding: 9px 11px; background: var(--as-note); }
.bk-kind-blurb { margin: 8px 2px 0; font-size: 13px; color: var(--as-body); }

/* Who: every option on screen at once, a face over a name. */
.bk-faces { display: inline-flex; }
.bk-faces .bk-face + .bk-face { margin-left: -10px; }
.bk-face { border-radius: 50%; object-fit: cover; border: 2px solid var(--as-panel); flex: none; }
.bk-face--initials { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  background: var(--brand-primary); color: #fff; font-weight: 700; }
.bk-who { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.bk-who-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px; border-radius: 14px;
  text-decoration: none; color: var(--as-ink); }
.bk-who-face { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%;
  box-shadow: 0 0 0 2px transparent; transition: box-shadow .15s; }
.bk-who-face .bk-face { width: 52px; height: 52px; }
.bk-who-face--any { background: var(--as-field-quiet); }
.bk-who-face--any .bk-face { width: 24px; height: 24px; }
.bk-who-face--any .bk-faces .bk-face + .bk-face { margin-left: -8px; }
.bk-who-name { font-size: 13px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--as-body); }
.bk-who-opt[aria-current="true"] { background: var(--as-note); }
.bk-who-opt[aria-current="true"] .bk-who-face { box-shadow: 0 0 0 3px var(--as-link); }
.bk-who-opt[aria-current="true"] .bk-who-name { color: var(--as-ink); font-weight: 700; }

/* When: the weeks with open times. Open days are tinted with a dot under
   the number; today is ringed; the picked day is filled. */
.bk-cal { padding: 12px; border-radius: 14px; border: 1px solid var(--as-panel-border); }
.bk-cal-month { margin: 0 2px 8px; font-size: 14px; font-weight: 700; color: var(--as-ink); }
.bk-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.bk-cal-dow { font-size: 11px; font-weight: 700; color: var(--as-muted); padding-bottom: 2px; }
.bk-cal-day { position: relative; display: flex; align-items: center; justify-content: center; height: 42px; border-radius: 10px;
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; text-decoration: none;
  color: var(--as-ink); background: var(--as-note); }
a.bk-cal-day:hover { box-shadow: inset 0 0 0 2px var(--as-link); }
.bk-cal-dot { position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--as-link); }
.bk-cal-day.is-closed { background: none; color: var(--as-muted); font-weight: 400; opacity: .55; }
.bk-cal-day.is-today { box-shadow: inset 0 0 0 2px var(--as-field-border); }
.bk-cal-day[aria-current="date"] { background: var(--brand-primary-dark); color: #fff; box-shadow: none; }
.bk-cal-day[aria-current="date"] .bk-cal-dot { background: #fff; }
.bk-cal-day:focus-visible, .bk-kind:focus-visible, .bk-who-opt:focus-visible, .bk-slot:focus-visible {
  outline: 2px solid var(--as-focus); outline-offset: 2px; }

/* Times: the day's, by morning / afternoon / evening. */
.bk-day { margin-top: 18px; }
.bk-day-name { margin: 0; font-size: 17px; font-weight: 700; color: var(--as-ink); }
.bk-part { margin: 12px 0 6px; font-size: 12px; font-weight: 700; color: var(--as-muted); }
.bk-slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.bk-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; padding: 4px 6px;
  border-radius: 10px; border: 1px solid var(--as-field-border); background: var(--as-field); text-decoration: none;
  color: var(--as-ink); font-variant-numeric: tabular-nums; transition: background-color .12s, color .12s, border-color .12s; }
.bk-slot:hover { background: var(--brand-primary-dark); border-color: var(--brand-primary-dark); color: #fff; }
.bk-slot-time { font-size: 16px; font-weight: 700; }
.bk-slot-who { font-size: 11px; opacity: .75; }

/* Which zone the times are in, and Change. */
.bk-zone { margin-top: 18px; font-size: 13px; color: var(--as-muted); }
.bk-zone summary { cursor: pointer; list-style: none; }
.bk-zone summary::-webkit-details-marker { display: none; }
.bk-zone strong { color: var(--as-ink); font-weight: 600; }
.bk-zone-form { display: grid; gap: 8px; margin-top: 10px; }

/* Details and booked. */
.bk-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.bk-summary--center { justify-content: center; }
.bk-textarea { min-height: 88px; resize: vertical; }
.bk-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.bk-cancel-form { display: flex; justify-content: center; }
.bk-cancel { background: none; border: 0; padding: 10px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--as-danger); }
.bk-cancel:hover { text-decoration: underline; }

/* Desktop: a wider panel, the calendar and the day's times side by side,
   so a day and a time are picked in one glance. */
@media (min-width: 960px) {
  /* The splash puts the brand beside a 440px form. Booking needs room for
     two columns, so on its page the brand sits above a centred, wider panel
     (side by side, the headline was squeezed to a word per line). */
  .as-inner:has(.bk-when) { grid-template-columns: minmax(0, 760px); justify-content: center; gap: 28px; }
  .as-inner:has(.bk-when) .as-brand { justify-content: center; justify-items: center; }
  .as-inner:has(.bk-when) .as-headline span { display: inline; }
  .as-inner:has(.bk-when) .as-side { max-width: 760px; margin: 0 auto; }
  .bk-when { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .bk-when .bk-day { margin-top: 0; }
  .bk-kinds { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) { .bk-kind, .bk-slot, .bk-who-face { transition: none; } }