/* Booking page (custom-book.hbs): details panel, month, times; then the details form; then "booked".
   Desktop is three columns in one card, phones stack them. Tokens only. */
.bk-section{padding-block-start:var(--s-5)}
.bk-intro{margin-block-end:var(--s-4)}
.bk-sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bk-muted{color:var(--ink-80);font-size:var(--fs-small)}

.bk{
  display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius);
  box-shadow:var(--shadow-card);overflow:hidden;
}
.bk[hidden]{display:none}

/* left panel */
.bk-info{padding:var(--s-3);border-inline-end:1px solid var(--hairline);display:flex;flex-direction:column;gap:var(--s-1)}
.bk-info__mark{inline-size:40px;block-size:40px}
.bk-info__host{margin:var(--s-1) 0 0;font-size:var(--fs-small);font-weight:600;color:var(--ink-80)}
.bk-info__title{font-family:var(--font-display);font-size:var(--fs-h3);color:var(--ink);margin:0 0 var(--s-1)}
.bk-types{display:flex;flex-wrap:wrap;gap:var(--s-1);margin-block-end:var(--s-1)}
.bk-types button{
  font:600 var(--fs-small) var(--font-body);color:var(--ink);background:var(--ivory);
  border:1.5px solid var(--hairline);border-radius:var(--radius-pill);padding:10px 16px;cursor:pointer;
}
.bk-types button[aria-checked=true]{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
.bk-facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:var(--fs-small);font-weight:600;color:var(--ink-80)}
.bk-facts li{display:flex;align-items:center;gap:10px;min-inline-size:0}
.bk-facts svg{inline-size:18px;block-size:18px;flex:none;fill:none;stroke:var(--emerald);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* 16px: anything smaller makes iOS zoom the page when the select is focused */
.bk-facts select{min-height:36px;padding:4px 8px;font-size:16px;border-radius:var(--radius);inline-size:100%;min-inline-size:0}
.bk-info__when{margin:var(--s-1) 0 0;padding:var(--s-1) var(--s-2);background:var(--ivory);border-radius:10px;font-size:var(--fs-small);font-weight:700;color:var(--ink)}
.bk-info__blurb{margin:var(--s-1) 0 0;font-size:var(--fs-small);color:var(--ink-80)}

/* step 1: calendar + times */
.bk-pick{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,240px)}
.bk-cal{padding:var(--s-3)}
.bk-cal__head,.bk-times__head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s-1);margin-block-end:var(--s-2)}
.bk-cal__head h3,.bk-times__head h3{margin:0;font-family:var(--font-body);font-size:var(--fs-body);font-weight:700;color:var(--ink)}
.bk-cal__nav{display:flex;gap:4px}
.bk-cal__nav button{inline-size:44px;block-size:44px;border-radius:50%;border:1.5px solid var(--hairline);background:var(--paper);color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
.bk-cal__nav button:disabled{opacity:.35;cursor:default}
.bk-cal__dow,.bk-cal__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.bk-cal__dow span{text-align:center;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-80);padding-block-end:6px}
.bk-cal__grid button{
  aspect-ratio:1;inline-size:100%;max-inline-size:52px;justify-self:center;border:0;border-radius:10px;background:transparent;
  font:600 var(--fs-small) var(--font-body);color:var(--ink-80);font-variant-numeric:tabular-nums;cursor:default;
}
.bk-cal__grid button.is-open{background:var(--ivory);color:var(--ink);cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--hairline)}
@media (hover:hover) and (pointer:fine){.bk-cal__grid button.is-open:hover{box-shadow:inset 0 0 0 1.5px var(--emerald)}}
.bk-cal__grid button.is-today{text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:4px}
.bk-cal__grid button[aria-pressed=true]{background:var(--ink);color:var(--ivory);box-shadow:none}
.bk-cal__grid button:disabled{opacity:.4}
.bk-cal__grid .bk-blank{visibility:hidden}

.bk-times{padding:var(--s-3);border-inline-start:1px solid var(--hairline);display:flex;flex-direction:column;min-block-size:0}
.bk-clock{display:inline-flex;border:1.5px solid var(--hairline);border-radius:var(--radius-pill);overflow:hidden}
.bk-clock button{border:0;background:var(--paper);font:600 12px var(--font-body);color:var(--ink-80);padding:10px 12px;min-block-size:36px;cursor:pointer}
.bk-clock button[aria-pressed=true]{background:var(--ivory);color:var(--ink)}
.bk-times__list{display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-block-size:420px;padding-inline-end:4px}
.bk-times__list button{
  min-height:44px;border:1.5px solid var(--hairline);border-radius:10px;background:var(--paper);
  font:600 var(--fs-small) var(--font-body);color:var(--ink);font-variant-numeric:tabular-nums;cursor:pointer;
}
.bk-times__list button:focus-visible{border-color:var(--emerald);outline:none;box-shadow:0 0 0 3px var(--amber-soft)}
@media (hover:hover) and (pointer:fine){.bk-times__list button:hover{border-color:var(--emerald);outline:none;box-shadow:0 0 0 3px var(--amber-soft)}}
/* messages (none yet, no free times, could not load) span the whole times grid on phones */
.bk-times__list > p{grid-column:1/-1}

/* touch: press feedback on pointer-down, and no text selection or callout on a long press */
.bk-types button,.bk-times__list button,.bk-cal__grid button.is-open,.bk-cal__nav button{transition:transform 160ms var(--ease-out,cubic-bezier(.23,1,.32,1))}
.bk-types button:active,.bk-times__list button:active,.bk-cal__grid button.is-open:active,.bk-cal__nav button:not(:disabled):active{transform:scale(.97)}
.bk button,.bk-goals label{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* step 2: form */
.bk-form{padding:var(--s-3);max-inline-size:560px}
.bk-form[hidden],.bk-pick[hidden],.bk-done[hidden]{display:none}
.bk-guests{display:flex;flex-direction:column;gap:8px}
.bk-guests:not(:empty){margin-block-end:var(--s-1)}
.bk-guest{display:flex;gap:8px;align-items:center}
.bk-guest button{border:0;background:none;color:var(--ink-80);font-size:22px;cursor:pointer;inline-size:36px}
.bk-link{border:0;background:none;padding:0;font:700 var(--fs-small) var(--font-body);color:var(--emerald);cursor:pointer;margin-block-end:var(--s-3)}
.bk-consent{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-small);color:var(--ink-80);margin-block-end:var(--s-2)}
.bk-consent input{margin-block-start:4px;accent-color:var(--emerald);inline-size:18px;block-size:18px;flex:none}
.bk-form__actions{display:flex;gap:var(--s-1);justify-content:flex-end;flex-wrap:wrap}
.bk-form .btn[disabled]{opacity:.6;cursor:progress;transform:none}

/* step 3: booked */
.bk-done{padding:var(--s-4) var(--s-3);text-align:center;outline:none}
.bk-done img{display:block;margin-inline:auto}
.bk-done h3{font-family:var(--font-display);font-size:var(--fs-h3);color:var(--ink);margin:var(--s-2) 0 var(--s-1)}
.bk-done__list{display:grid;grid-template-columns:auto 1fr;gap:8px var(--s-2);text-align:start;max-inline-size:440px;margin:var(--s-3) auto;padding:var(--s-2);border-block:1px solid var(--hairline)}
.bk-done__list dt{font-weight:700;color:var(--ink)}
.bk-done__list dd{margin:0}
.bk-fallback{padding:var(--s-3);background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius)}

@media (max-width:900px){
  .bk-pick{grid-template-columns:1fr}
  .bk-times{border-inline-start:0;border-block-start:1px solid var(--hairline)}
  .bk-times__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));max-block-size:none}
}
@media (max-width:680px){
  .bk{grid-template-columns:1fr}
  .bk-info{border-inline-end:0;border-block-end:1px solid var(--hairline);padding:var(--s-2)}
  .bk-cal,.bk-times,.bk-form{padding:var(--s-2)}
  .bk-cal__dow,.bk-cal__grid{gap:4px}
}
@media (prefers-reduced-motion:reduce){.bk *{transition:none!important}}

/* optional labels, moving a booking, and the optional questions after booking */
.bk-opt{font-weight:500;color:var(--ink-80)}
input[type=tel]{font-family:var(--font-body);font-size:var(--fs-body);color:var(--text);background:var(--paper);border:1.5px solid var(--hairline);border-radius:var(--radius);padding:var(--s-2);min-height:48px;inline-size:100%}
input[type=tel]:focus-visible{outline:none;border-color:var(--emerald);box-shadow:0 0 0 3px var(--amber-soft)}
.bk-form[data-bk-step=move] p{font-size:var(--fs-body)}
.bk-more{margin:var(--s-4) auto 0;max-inline-size:440px;text-align:start;padding-block-start:var(--s-3);border-block-start:1px solid var(--hairline)}
.bk-more h4{margin:0 0 var(--s-2);font-family:var(--font-body);font-size:var(--fs-body);color:var(--ink)}
.bk-goals{border:0;margin:0 0 var(--s-3);padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bk-goals legend{font-size:var(--fs-small);font-weight:700;color:var(--ink);margin-block-end:var(--s-1);padding:0}
.bk-goals label{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1.5px solid var(--hairline);border-radius:var(--radius-pill);font-size:var(--fs-small);cursor:pointer}
.bk-goals input{accent-color:var(--emerald)}
.bk-goals label:has(input:checked){border-color:var(--emerald);background:var(--ivory)}
@media (max-width:680px){.bk-cal__dow,.bk-cal__grid{gap:2px}.bk-cal__grid button{aspect-ratio:auto;min-block-size:44px}}