/* ══════════════════════════════════════
   AGEYE — /book (intro-call booking page)

   AGEYE's own calendar and slot picker over Microsoft Bookings (via crewd).
   Styled after the Helm presentation deck — linen paper, DM Sans, DM Mono
   labels — with one white two-pane card, per Nick's mock. Loaded only on
   /book (inc/asset-scope.php), so the `--bk-*` tokens below are this page's
   single source of truth and nothing here leaks into other pages. Light
   surface by design — the site is `only light`.

   Raw colors live ONLY in the :root block. Every rule below references a token.
   ══════════════════════════════════════ */

:root {
  /* surfaces */
  --bk-bg:        #F4F0E7;
  --bk-void:      #E4DED2;
  --bk-card:      #FBF8F2;
  --bk-tint:      #EEE8DC;
  --bk-white:     #FFFFFF;
  --bk-day:       #F1EEE8;  /* a bookable day, at rest */
  --bk-day-hover: #E9E4DA;
  /* ink */
  --bk-ink:       #1A1A2E;
  --bk-ink-2:     #45455A;
  --bk-ink-3:     #6A6357;
  --bk-muted:     #A9A398;  /* days with nothing to book */
  /* lines */
  --bk-line:      #E2DACB;
  --bk-line-2:    #D1C7B4;
  --bk-hair:      #ECE8E1;  /* hairlines inside the white card */
  --bk-dot:       #D3C9B5;
  /* accents */
  --bk-pink:      #E6007E;
  --bk-pink-ink:  #CC0066;  /* pink text and fills on white: 5.6:1, AA */
  --bk-pink-wash: #FFF0F7;
  --bk-green:     #4DB848;
  --bk-green-ink: #2E7D2B;
  --bk-green-wash:#E8F5E7;
  --bk-teal:      #3BB8A8;
  --bk-error:     #B42318;
  --bk-error-wash:#FEF3F2;
  /* texture (from the deck's grid-bg slides) */
  --bk-linen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .34 0 0 0 0 .22 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  --bk-grid:  radial-gradient(circle at 1px 1px, var(--bk-dot) 1.2px, transparent 1.3px);
  --bk-weave: repeating-linear-gradient(0deg, rgba(120, 98, 60, .035) 0 1px, transparent 1px 4px),
              repeating-linear-gradient(90deg, rgba(120, 98, 60, .028) 0 1px, transparent 1px 5px);
  /* type */
  --bk-font: 'DM Sans', 'Proxima Nova', Arial, sans-serif;
  --bk-mono: 'DM Mono', 'DM Sans', monospace;
  /* shape + depth */
  --bk-radius-lg: 20px;
  --bk-radius:    10px;
  --bk-radius-sm: 8px;
  --bk-shadow: 0 1px 2px rgba(70, 52, 24, .06), 0 14px 34px -14px rgba(70, 52, 24, .20);
  --bk-ease: cubic-bezier(.2, .7, .2, 1);
  /* layout */
  --bk-gutter: 16px;
  --bk-max:    1120px;
  --bk-cell:   44px;    /* a calendar day; also the minimum touch target */
}

/* ── Page ground ── */
html { background: var(--bk-bg); }
body.bk-body {
  background: var(--bk-bg);
  color: var(--bk-ink);
  font-family: var(--bk-font);
  -webkit-font-smoothing: antialiased;
}
.bk {
  min-height: 100vh;
  background-color: var(--bk-bg);
  background-image: var(--bk-linen), var(--bk-grid), var(--bk-weave);
  background-size: auto, 32px 32px, auto;
}
.bk-wrap { max-width: var(--bk-max); margin: 0 auto; padding: 0 var(--bk-gutter); }
.bk a { color: inherit; }
.bk [hidden] { display: none !important; }
.bk :focus-visible { outline: 2px solid var(--bk-pink); outline-offset: 2px; }
.bk-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ── Top bar ── */
.bk-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 0;
}
.bk-top-logo img { height: 28px; width: auto; display: block; }
.bk-top-link {
  font: 500 12px/1 var(--bk-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--bk-ink-3); text-decoration: none;
}
.bk-top-link:hover { color: var(--bk-ink); }

/* ── The card ── */
.bk-card {
  display: grid;
  grid-template-columns: minmax(260px, 34fr) minmax(0, 66fr);
  margin: 28px 0 0;
  background: var(--bk-white);
  border: 1px solid var(--bk-hair);
  border-radius: var(--bk-radius-lg);
  box-shadow: var(--bk-shadow);
  overflow: hidden;
}

/* Left pane */
.bk-side {
  display: flex; flex-direction: column;
  padding: 48px 44px;
  border-right: 1px solid var(--bk-hair);
}
.bk-eyebrow {
  margin: 0 0 14px;
  font: 600 13px/1 var(--bk-font); letter-spacing: .12em; text-transform: uppercase;
  color: var(--bk-pink-ink);
}
.bk-h1 {
  margin: 0 0 18px;
  font-weight: 700; font-size: clamp(34px, 3.6vw, 44px); line-height: 1.04; letter-spacing: -.035em;
  color: var(--bk-ink);
}
.bk-lead { margin: 0; font-size: 18px; line-height: 1.5; color: var(--bk-ink-2); max-width: 30ch; }
.bk-rule { border: 0; height: 1px; background: var(--bk-hair); margin: 28px 0 22px; }
.bk-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bk-facts li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--bk-ink); }
.bk-facts .bk-icon { color: var(--bk-ink-3); }

/* Right pane */
.bk-pane { display: flex; flex-direction: column; padding: 48px 44px 0; min-width: 0; }
.bk-h2 { margin: 0 0 28px; font-weight: 650; font-size: 22px; letter-spacing: -.015em; color: var(--bk-ink); }

.bk-picker { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 32px; }
.bk-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.bk-month { margin: 0; font-weight: 600; font-size: 17px; color: var(--bk-ink); }
.bk-cal-nav { display: flex; gap: 6px; }
.bk-nav {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--bk-ink); cursor: pointer;
}
.bk-nav:hover:not(:disabled) { background: var(--bk-day); }
.bk-nav:disabled { color: var(--bk-muted); cursor: default; }

.bk-dows, .bk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.bk-dows span {
  text-align: center; padding-bottom: 10px;
  font: 600 11px/1 var(--bk-font); letter-spacing: .08em; text-transform: uppercase; color: var(--bk-ink-3);
}
.bk-day {
  display: grid; place-items: center; height: var(--bk-cell); padding: 0;
  border: 0; border-radius: var(--bk-radius-sm); background: transparent;
  font: 500 15px/1 var(--bk-font); color: var(--bk-muted);
}
.bk-day.is-open { background: var(--bk-day); color: var(--bk-ink); font-weight: 700; cursor: pointer; transition: background .15s var(--bk-ease); }
.bk-day.is-open:hover { background: var(--bk-day-hover); }
.bk-day.is-selected, .bk-day.is-selected:hover { background: var(--bk-pink-ink); color: var(--bk-white); }
.bk-day.is-blank { visibility: hidden; }

.bk-day-label { margin: 0 0 18px; font-weight: 600; font-size: 17px; color: var(--bk-ink); min-height: 36px; display: flex; align-items: center; }
.bk-slots { display: grid; gap: 10px; max-height: 372px; overflow-y: auto; padding: 2px; align-content: start; }
.bk-slot {
  height: 48px; padding: 0 12px;
  border: 1.5px solid var(--bk-pink-ink); border-radius: var(--bk-radius-sm);
  background: var(--bk-white); color: var(--bk-pink-ink);
  font: 600 15px/1 var(--bk-font); cursor: pointer;
  transition: background .15s var(--bk-ease), color .15s var(--bk-ease);
}
.bk-slot:hover { background: var(--bk-pink-wash); }
.bk-slot:active { background: var(--bk-pink-ink); color: var(--bk-white); }
.bk-status { margin: 0; font-size: 14px; line-height: 1.5; color: var(--bk-ink-3); }
.bk-status a { color: var(--bk-pink-ink); }

.bk-tz {
  display: flex; align-items: center; gap: 10px;
  margin: 32px 0 0; padding: 20px 0 24px; border-top: 1px solid var(--bk-hair);
  font-size: 14px; color: var(--bk-ink-2);
}
.bk-tz .bk-icon { color: var(--bk-ink-3); }

/* Step 2: details */
.bk-back {
  display: inline-flex; align-items: center; gap: 4px; margin: -8px 0 14px; padding: 6px 8px 6px 2px;
  border: 0; background: transparent; color: var(--bk-ink-3); font: 500 14px/1 var(--bk-font); cursor: pointer;
}
.bk-back:hover { color: var(--bk-ink); }
.bk-chosen {
  margin: -14px 0 22px; padding: 12px 14px; border-radius: var(--bk-radius-sm);
  background: var(--bk-pink-wash); color: var(--bk-pink-ink); font-weight: 600; font-size: 15px;
}
.bk-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bk-field { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: var(--bk-ink-2); }
.bk-field em { font-style: normal; font-weight: 400; color: var(--bk-ink-3); }
.bk-field-wide { grid-column: 1 / -1; }
.bk-field input {
  height: 46px; padding: 0 14px; width: 100%;
  border: 1px solid var(--bk-line-2); border-radius: var(--bk-radius-sm); background: var(--bk-white);
  font: 400 16px/1 var(--bk-font); color: var(--bk-ink);
}
.bk-field input::placeholder { color: var(--bk-muted); }
.bk-field input:focus { outline: none; border-color: var(--bk-pink-ink); box-shadow: 0 0 0 3px var(--bk-pink-wash); }
.bk-field input[aria-invalid="true"] { border-color: var(--bk-error); background: var(--bk-error-wash); }
.bk-turnstile { margin-top: 18px; min-height: 0; }
.bk-error {
  margin: 16px 0 0; padding: 12px 14px; border-radius: var(--bk-radius-sm);
  background: var(--bk-error-wash); color: var(--bk-error); font-size: 14px; line-height: 1.5;
}
.bk-error a { color: inherit; font-weight: 600; }
.bk-confirm {
  margin-top: 20px; width: 100%; height: 50px;
  border: 0; border-radius: var(--bk-radius-sm); background: var(--bk-pink-ink); color: var(--bk-white);
  font: 700 16px/1 var(--bk-font); cursor: pointer;
}
.bk-confirm:hover:not(:disabled) { background: var(--bk-pink); }
.bk-confirm:disabled { opacity: .55; cursor: progress; }

/* Step 3: done */
.bk-done { padding: 24px 0 8px; outline: none; }
.bk-done-mark {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px;
  border-radius: 50%; background: var(--bk-green-wash); color: var(--bk-green-ink);
}
.bk-done-mark .bk-icon { width: 26px; height: 26px; stroke-width: 2.2; }
.bk-done .bk-h2 { margin-bottom: 10px; }
.bk-done-when { margin: 0 0 14px; font-weight: 600; font-size: 18px; color: var(--bk-ink); }
.bk-done-note { margin: 0; max-width: 52ch; font-size: 15px; line-height: 1.6; color: var(--bk-ink-2); }

/* ── Below the card ── */
.bk-fallback { margin: 18px 4px 0; font-size: 13px; color: var(--bk-ink-3); }
.bk-fallback a { color: var(--bk-ink-2); text-decoration: underline; text-decoration-color: var(--bk-line-2); text-underline-offset: 3px; }
.bk-fallback a:hover { color: var(--bk-ink); text-decoration-color: var(--bk-pink); }
.bk-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px;
  margin-top: 48px; padding: 20px 0 36px; border-top: 1px solid var(--bk-line);
  font: 500 12px/1.5 var(--bk-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--bk-ink-3);
}
.bk-foot a { text-decoration: none; color: var(--bk-ink-2); }
.bk-foot a:hover { color: var(--bk-ink); }

/* ── Tablet: card stacks ── */
@media (max-width: 960px) {
  .bk-card { grid-template-columns: minmax(0, 1fr); }
  .bk-side { border-right: 0; border-bottom: 1px solid var(--bk-hair); padding: 36px 32px 28px; }
  .bk-pane { padding: 32px 32px 0; }
}

/* ── Phone: 16px gutters, slots under the calendar ── */
@media (max-width: 720px) {
  .bk-top { padding: 16px 0; }
  .bk-top-logo img { height: 24px; }
  .bk-top-link { font-size: 11px; }
  .bk-card { margin-top: 8px; border-radius: 16px; }
  .bk-side { padding: 26px 20px 22px; }
  .bk-h1 { margin-bottom: 12px; }
  .bk-lead { font-size: 16px; }
  .bk-rule { margin: 20px 0 16px; }
  .bk-facts { grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 18px; }
  .bk-facts li { font-size: 14px; gap: 8px; }
  .bk-pane { padding: 24px 16px 0; }
  .bk-h2 { font-size: 19px; margin-bottom: 18px; }
  .bk-picker { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .bk-dows, .bk-days { gap: 4px; }
  .bk-day { height: 42px; font-size: 15px; }
  .bk-day-label { margin-bottom: 12px; min-height: 0; }
  .bk-slots { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); max-height: none; }
  .bk-fields { grid-template-columns: minmax(0, 1fr); }
  .bk-foot { flex-direction: column; gap: 6px; margin-top: 32px; padding-bottom: 28px; }
}
@media (max-width: 380px) {
  .bk-facts { grid-template-columns: minmax(0, 1fr); }
}