/* Booking calendar card (Chris 2026-11-06), Contact only. Uses the shared tokens in styles.css and the
   contact page's .field / .err / ct-shake styles for the form. One accent fill (the picked day). */
.bk { position: relative; width: 100%; max-width: 560px; justify-self: stretch; --bk-pad: clamp(14px, 1.6vw, 22px); }
/* the sheet underneath: a desk-pad edge peeking out below the card */
.bk::before {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -9px; height: 48px;
  background: #EFECE5; box-shadow: 0 10px 24px -18px rgba(11, 11, 11, 0.35);
}
.bk-card {
  position: relative; z-index: 1; background: var(--paper);
  box-shadow: 0 1px 2px rgba(11, 11, 11, 0.06), 0 26px 48px -30px rgba(11, 11, 11, 0.42);
}
.bk-view[hidden] { display: none; }
.bk-view { outline: none; }

/* month sheet */
.bk-sheetwrap { position: relative; perspective: 1100px; }
.bk-sheet { background: var(--paper); }
.bk-leaf { position: absolute; inset: 0 0 auto 0; z-index: 2; transform-origin: 50% 0; backface-visibility: hidden; pointer-events: none; will-change: transform, opacity; box-shadow: 0 18px 30px -24px rgba(11, 11, 11, 0.5); }
.bk-band { background: var(--ink); color: var(--paper); padding: 0 56px; min-height: 60px; display: grid; place-items: center; }
.bk-month { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.625rem, 1.1rem + 1vw, 2.125rem); line-height: 1; letter-spacing: 0.01em; text-align: center; }
.bk-nav {
  position: absolute; top: 8px; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; padding: 0; background: transparent; color: var(--paper); cursor: pointer;
  transition: color var(--dur-ui) ease, opacity var(--dur-ui) ease, scale var(--dur-press) var(--ease-out);
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.bk-nav--prev { left: 6px; }
.bk-nav--next { right: 6px; }
.bk-nav svg { width: 14px; height: 22px; }
.bk-nav:active { scale: 0.9; }
.bk-nav:disabled { opacity: 0.28; cursor: default; scale: 1; }
.bk-nav:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) { .bk-nav:not(:disabled):hover { color: var(--accent); } }

.bk-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 12px var(--bk-pad) 6px; text-align: center; font-size: var(--step-small); font-weight: 600; color: var(--ink-soft); }
.bk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 0 var(--bk-pad) 6px; }
.bk-day {
  min-width: 0; height: clamp(40px, 2.4vw + 18px, 50px); border: 0; padding: 0; margin: 0;
  background: var(--paper-2); color: var(--ink); font: 700 1rem/1 var(--font-text); font-variant-numeric: tabular-nums;
  cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease, scale var(--dur-press) var(--ease-out);
}
.bk-day { display: grid; place-items: center; }
.bk-day.is-off { background: transparent; color: #6E6A62; font-weight: 400; cursor: default; } /* no free times: plain text, 5:1 on paper */
.bk-day.is-today span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.28em; }
.bk-day.is-on { background: var(--accent); color: var(--ink); }
.bk-day:not(.is-off):active { scale: 0.94; }
.bk-day:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .bk-day:not(.is-off):not(.is-on):hover { background: var(--ink); color: var(--paper); }
}

.bk-tz { padding: 6px var(--bk-pad) 0; }

/* times */
.bk-times { padding: 18px var(--bk-pad) 0; }
.bk-times[hidden] { display: none; }
.bk-times-h { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.5rem, 1.1rem + 0.7vw, 1.875rem); line-height: 1; margin-bottom: 12px; outline: none; }
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.bk-slot {
  width: 100%; min-height: 48px; border: 0; padding: 0 8px; background: var(--paper-2); color: var(--ink);
  font: 700 1rem/1 var(--font-text); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; touch-action: manipulation;
  transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease, scale var(--dur-press) var(--ease-out);
}
.bk-slot:active { scale: 0.97; background: var(--accent); }
.bk-slot:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .bk-slot:hover { background: var(--ink); color: var(--paper); } }
/* slots pop in, staggered (total under 300ms) */
html.motion .bk-slots.is-in li { animation: bk-in 280ms var(--ease-out) both; animation-delay: calc(var(--i) * var(--each, 30ms)); }
@keyframes bk-in { from { opacity: 0; translate: 0 8px; scale: 0.96; } to { opacity: 1; translate: 0 0; scale: 1; } }
.bk-status { padding: 14px var(--bk-pad) var(--bk-pad); font-weight: 600; font-size: var(--step-small); }

/* form */
.bk-view[data-bk-view="form"], .bk-done { padding: var(--bk-pad); }
.bk-pick { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; background: var(--paper-2); padding: 12px 14px; margin-bottom: 20px; }
.bk-pick-when { font-weight: 700; }
.bk-back { border: 0; padding: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; }
.bk-form { display: grid; gap: 18px; }
.bk-form .btn { width: 100%; }
.bk-form .btn.is-busy { cursor: progress; opacity: 0.75; }
.bk-form .form-legal { font-size: var(--step-small); }
/* "What are you interested in?" chips (2026-11-06): the card is paper, so the chips take the tone step
   (the page's .tone rule would make them paper on paper) */
.bk-need .chips span { background: var(--paper-2); }
.bk-need .chips input:checked + span { background: var(--ink); color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .tone .bk-need .chips label:hover input:not(:checked) + span, .bk-need .chips label:hover input:not(:checked) + span { background: #DAD6CC; } }

/* booked */
.bk-done { display: grid; gap: 16px; justify-items: start; }
.bk-done-h { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.25rem, 1.4rem + 2vw, 3.25rem); line-height: 0.92; }
.bk-done p { overflow-wrap: anywhere; }
.bk-check { width: 56px; height: 56px; }
.bk-check path { stroke-dasharray: 44; stroke-dashoffset: 0; }
html.motion .bk-done.is-shown .bk-check { animation: bk-check 400ms var(--ease-out) both; }
html.motion .bk-done.is-shown .bk-check path { animation: bk-draw 420ms var(--ease-out) 160ms both; }
html.motion .bk-done.is-shown > :not(.bk-check) { animation: fade-up 500ms var(--ease-out) 220ms both; }
@keyframes bk-check { from { opacity: 0; scale: 0.9; } to { opacity: 1; scale: 1; } }
@keyframes bk-draw { from { stroke-dashoffset: 44; } to { stroke-dashoffset: 0; } }

/* the card settles into place once, as it first scrolls in */
html.motion .bk.bk-pre { opacity: 0; transform: perspective(1400px) rotateX(8deg) translateY(20px); transform-origin: 50% 100%; }
html.motion .bk.bk-pre.is-in { opacity: 1; transform: none; transition: transform 900ms var(--ease-out), opacity 450ms ease-out; }

/* the fallback label is long: let it wrap on narrow phones */
.ct-cal-act .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: 12px; }
.ct-cal.is-live .ct-cal-act, .ct-cal.is-loading .ct-cal-act { display: none; }
.bk-altlink[hidden], .bk-mock[hidden] { display: none; }
.bk-mock { background: var(--paper); padding: 8px 12px; font-weight: 600; }

@media (max-width: 1000px) { .bk { max-width: 520px; } }
@media (max-width: 600px) {
  html.motion .bk.bk-pre { transform: perspective(1200px) rotateX(4deg) translateY(12px); }
  .bk-band { padding: 0 48px; min-height: 56px; }
  .bk-nav { top: 6px; }
  .bk-nav--prev { left: 2px; } .bk-nav--next { right: 2px; }
  .bk-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .bk { --bk-pad: 10px; }
  .bk-week, .bk-days { gap: 3px; }
  .bk-day { height: 40px; font-size: 0.9375rem; }
  .bk-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .bk-day, .bk-slot, .bk-nav { transition-duration: 0.01ms; }
  .bk-day:not(.is-off):active, .bk-slot:active, .bk-nav:active { scale: 1; }
}