/* ═══════════════════════════════════════════════════════════════════════
   Falcon Online Booking — Ata Dental site branding (crimson / white / serif).
   Re-themed to match the practice's marketing site (atadental.com): clean
   white/light-gray editorial look, near-black bold serif display headings with
   a short red rule beneath, red uppercase letter-spaced overlines, white cards
   with soft shadows + ~8px radius, solid crimson primary buttons.

   Constraints that SHAPE this file (unchanged from v1):
     · Strict CSP (style-src 'self', script-src 'self', NO 'unsafe-inline') —
       every byte of CSS lives here; no inline styles anywhere.
     · No external origins — no @import, no remote url(), no web-font fetch.
       The display face is a SYSTEM serif stack (Georgia/Iowan/Palatino bold),
       body is system-ui. NO Google Font is loaded (the site may name one, but
       CSP is self-only — we approximate with a system serif).
     · Mobile-first; 44px minimum touch targets; WCAG AA contrast; visible
       focus rings; prefers-reduced-motion respected.

   Palette — white/#f6f6f6 grounds, near-black ink, Ata crimson primary/accent.
   Body text stays near-black on white; red is reserved for CTAs, headings-
   adjacent rules/overlines, and accents (never body copy).

   NOTE: variable names retain their v1 identifiers (--bk-teal / --bk-brass) to
   keep every downstream selector stable; their VALUES now carry the crimson
   brand. Read them as "primary" / "accent" respectively.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Grounds & ink */
  --bk-paper:        #f6f6f6;   /* page ground (light gray) */
  --bk-paper-2:      #ffffff;   /* raised card (white) */
  --bk-paper-sink:   #ececec;   /* pressed / inset */
  --bk-ink:          #1a1a1a;   /* near-black body text */
  --bk-ink-soft:     #454545;   /* secondary text (AA on white) */
  --bk-ink-faint:    #6c6c6c;   /* tertiary / meta (AA on white) */

  /* Ata crimson — primary */
  --bk-teal:         #c8102e;   /* Ata crimson (primary / CTA) */
  --bk-teal-700:     #9e0c23;   /* pressed / hover-darken */
  --bk-teal-300:     #d1505c;   /* soft accent / hover borderlines */
  --bk-teal-wash:    #fbeaec;   /* selected/hover wash */
  --bk-teal-wash-2:  #f7dadd;

  /* Accent — crimson family (brass fully removed) */
  --bk-brass:        #c8102e;   /* overlines, decorative dots, rules */
  --bk-brass-soft:   #f7dadd;
  --bk-brass-line:   rgba(200, 16, 46, 0.45);

  /* Lines & shadow (neutral grays) */
  --bk-hair:         rgba(26, 26, 26, 0.12);   /* hairline rule */
  --bk-hair-2:       rgba(26, 26, 26, 0.07);
  --bk-line:         #e2e2e2;                  /* input / card border */
  --bk-shadow-sm:    0 1px 2px rgba(26, 26, 26, 0.06);
  --bk-shadow-md:    0 6px 20px -8px rgba(26, 26, 26, 0.18);
  --bk-shadow-lg:    0 18px 48px -20px rgba(26, 26, 26, 0.26);

  /* Semantic */
  --bk-danger:       #a23b34;
  --bk-danger-wash:  #f7e9e7;
  --bk-danger-line:  #e0b8b3;

  /* Type — bold system serif display face, no web-font fetch */
  --bk-serif:        Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", serif;
  --bk-sans:         system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm — ~8px card radius (site) */
  --bk-radius:       8px;
  --bk-radius-lg:    12px;
  --bk-radius-pill:  999px;
  --bk-gap:          clamp(12px, 3vw, 18px);
  --bk-pad:          clamp(18px, 5vw, 34px);
  --bk-maxw:         42rem;

  --bk-ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --bk-focus:        0 0 0 3px var(--bk-paper), 0 0 0 5px var(--bk-teal);

  /* Locked light design; "only light" opts out of Chromium Auto Dark Mode,
     which otherwise flips the ink color while hardcoded light backgrounds
     survive → white-on-white inputs (bug found by owner testing, 2026-07-15).
     NOTE: this file previously carried a prefers-color-scheme:dark variables
     block — removed 2026-07-15 (it flipped --bk-ink near-white against the
     hardcoded #fff focus background = the owner-hit bug, and the locked light
     design never specced dark). Don't re-add it casually. */
  color-scheme: only light;
}
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

.bk-body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--bk-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--bk-ink);
  background-color: var(--bk-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Seam / red rule at the very top (site's crimson accent) ─────────── */
.bk-seam {
  height: 3px;
  background: var(--bk-teal);
}

/* ── Header ──────────────────────────────────────────────────────────── */
.bk-header {
  padding: clamp(18px, 4vw, 26px) var(--bk-pad) 0;
}
.bk-header-inner {
  max-width: var(--bk-maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.bk-logo {
  max-height: 46px;
  max-width: 180px;
  width: auto;
  object-fit: contain;
  /* Hidden until confirmed-loaded by the JS (adds .bk-logo-ok). Avoids a broken
     image flashing under strict CSP where inline onerror isn't allowed. */
  display: none;
}
.bk-logo.bk-logo-ok { display: block; }
.bk-header-text { display: flex; flex-direction: column; gap: 2px; }
.bk-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bk-brass);
  font-weight: 700;
}
.bk-office-name {
  margin: 0;
  font-family: var(--bk-serif);
  font-weight: 700;
  font-size: clamp(1.35rem, 5vw, 1.7rem);
  letter-spacing: 0.005em;
  color: var(--bk-ink);
}

/* ── Main column ─────────────────────────────────────────────────────── */
.bk-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--bk-maxw);
  margin: 0 auto;
  padding: clamp(20px, 5vw, 40px) var(--bk-pad) 96px;
}
.bk-app { position: relative; }

/* ── Progress rail ───────────────────────────────────────────────────── */
.bk-progress {
  list-style: none;
  display: flex;
  gap: 8px;
  margin: 0 0 clamp(20px, 5vw, 30px);
  padding: 0;
}
.bk-progress-dot {
  flex: 1;
  height: 4px;
  border-radius: var(--bk-radius-pill);
  background: var(--bk-hair);
  transition: background 0.4s var(--bk-ease);
}
.bk-progress-dot.is-done { background: var(--bk-teal-300); }
.bk-progress-dot.is-active { background: var(--bk-teal); }

/* ── Step blocks + staggered reveal ──────────────────────────────────── */
.bk-step { margin: 0; }
.bk-step[hidden] { display: none; }

/* Red uppercase letter-spaced overline (site's "ABOUT OUR PRACTICE" label). */
.bk-step-kicker {
  margin: 0 0 6px;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bk-brass);
  font-weight: 700;
}
/* Near-black bold serif display heading + short red rule beneath (site). */
.bk-h {
  font-family: var(--bk-serif);
  font-weight: 700;
  font-size: clamp(1.7rem, 7vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--bk-ink);
  margin: 0 0 clamp(16px, 4vw, 24px);
  padding-bottom: 14px;
  position: relative;
}
.bk-h::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 56px; height: 3px;
  background: var(--bk-teal);
  border-radius: 2px;
}
.bk-h3 {
  font-family: var(--bk-serif);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--bk-ink);
  margin: 0 0 14px;
}
.bk-lede { color: var(--bk-ink-soft); font-size: 1.05rem; margin: 0 0 22px; max-width: 34rem; }

/* Reveal: children of the visible step fade+rise in a gentle stagger. */
.bk-step:not([hidden]) > * {
  animation: bk-rise 0.5s var(--bk-ease) both;
}
.bk-step:not([hidden]) > *:nth-child(1) { animation-delay: 0.02s; }
.bk-step:not([hidden]) > *:nth-child(2) { animation-delay: 0.07s; }
.bk-step:not([hidden]) > *:nth-child(3) { animation-delay: 0.12s; }
.bk-step:not([hidden]) > *:nth-child(4) { animation-delay: 0.17s; }
.bk-step:not([hidden]) > *:nth-child(5) { animation-delay: 0.22s; }
.bk-step:not([hidden]) > *:nth-child(n+6) { animation-delay: 0.26s; }
@keyframes bk-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bk-welcome {
  font-family: var(--bk-serif);
  font-size: 1.15rem;
  color: var(--bk-ink-soft);
  margin: 0 0 18px;
}
.bk-welcome[hidden] { display: none; }

/* ── Back link ───────────────────────────────────────────────────────── */
.bk-back {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--bk-ink-soft);
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  padding: 8px 2px;
  margin: 0 0 6px -2px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bk-back::before { content: "\2039"; font-size: 1.3em; line-height: 1; color: var(--bk-teal); }
.bk-back:hover { color: var(--bk-teal); }

/* ── Choices (patient type) ──────────────────────────────────────────── */
.bk-choices { display: grid; gap: var(--bk-gap); }
.bk-choice {
  appearance: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 20px 22px;
  min-height: 44px;
  background: var(--bk-paper-2);
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-radius);
  box-shadow: var(--bk-shadow-sm);
  transition: transform 0.18s var(--bk-ease), border-color 0.18s var(--bk-ease),
              box-shadow 0.18s var(--bk-ease);
  color: var(--bk-ink);
  position: relative;
}
.bk-choice::after {
  content: "\203A";
  position: absolute;
  right: 20px; top: 50%;
  transform: translateY(-50%);
  color: var(--bk-teal);
  font-size: 1.5rem;
  opacity: 0.7;
  transition: transform 0.18s var(--bk-ease), opacity 0.18s var(--bk-ease);
}
.bk-choice:hover { border-color: var(--bk-teal-300); box-shadow: var(--bk-shadow-md); transform: translateY(-1px); }
.bk-choice:hover::after { transform: translateY(-50%) translateX(3px); opacity: 1; }
.bk-choice:active { transform: translateY(0) scale(0.995); }
.bk-choice-title { font-family: var(--bk-serif); font-size: 1.2rem; font-weight: 700; color: var(--bk-ink); }
.bk-choice-sub { font-size: 0.92rem; color: var(--bk-ink-faint); }

/* ── Visit-type cards ────────────────────────────────────────────────── */
.bk-type-list { display: grid; gap: var(--bk-gap); }
.bk-type-card {
  appearance: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 22px;
  min-height: 44px;
  background: var(--bk-paper-2);
  border: 1px solid var(--bk-line);
  border-left: 3px solid var(--bk-teal);
  border-radius: var(--bk-radius);
  box-shadow: var(--bk-shadow-sm);
  transition: transform 0.18s var(--bk-ease), border-color 0.18s var(--bk-ease),
              box-shadow 0.18s var(--bk-ease);
  color: var(--bk-ink);
}
.bk-type-card:hover {
  border-color: var(--bk-teal-300);
  border-left-color: var(--bk-teal);
  box-shadow: var(--bk-shadow-md);
  transform: translateY(-1px);
}
.bk-type-card:active { transform: translateY(0) scale(0.995); }
.bk-type-name { font-family: var(--bk-serif); font-size: 1.28rem; font-weight: 700; color: var(--bk-ink); }
.bk-type-meta { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--bk-ink-faint); }
.bk-type-dur {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--bk-ink-soft); font-weight: 500;
}
.bk-type-dur::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--bk-teal); display: inline-block;
}
.bk-type-desc { font-size: 0.95rem; color: var(--bk-ink-soft); line-height: 1.45; }

.bk-peer {
  margin: 18px 0 0;
  font-size: 0.92rem;
  color: var(--bk-ink-soft);
}
.bk-peer[hidden] { display: none; }
.bk-peer a { color: var(--bk-teal); text-decoration-color: var(--bk-brass-line); text-underline-offset: 2px; }

/* ── Day strip ───────────────────────────────────────────────────────── */
.bk-day-nav { display: flex; align-items: stretch; gap: 8px; margin-bottom: 8px; }
.bk-day-arrow {
  flex: 0 0 auto;
  width: 44px; min-height: 44px;
  border: 1px solid var(--bk-line);
  background: var(--bk-paper-2);
  border-radius: var(--bk-radius);
  color: var(--bk-teal);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s var(--bk-ease), background 0.15s var(--bk-ease);
}
.bk-day-arrow:hover:not(:disabled) { border-color: var(--bk-teal-300); background: var(--bk-teal-wash); }
.bk-day-arrow:disabled { opacity: 0.35; cursor: not-allowed; }
.bk-day-strip {
  flex: 1 1 auto;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 2px 0 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.bk-day {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 62px;
  min-height: 60px;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  border: 1px solid var(--bk-line);
  background: var(--bk-paper-2);
  border-radius: var(--bk-radius);
  cursor: pointer;
  color: var(--bk-ink);
  transition: border-color 0.15s var(--bk-ease), background 0.15s var(--bk-ease),
              transform 0.12s var(--bk-ease);
}
.bk-day-dow { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bk-ink-faint); }
.bk-day-num { font-family: var(--bk-serif); font-size: 1.3rem; font-weight: 700; color: var(--bk-ink); line-height: 1.05; }
.bk-day-mon { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bk-ink-faint); }
.bk-day:hover { border-color: var(--bk-teal-300); }
.bk-day.is-selected {
  border-color: var(--bk-teal);
  background: var(--bk-teal);
}
.bk-day.is-selected .bk-day-dow,
.bk-day.is-selected .bk-day-mon { color: var(--bk-teal-wash); }
.bk-day.is-selected .bk-day-num { color: #fff; }
.bk-day.is-empty { opacity: 0.5; }
.bk-day.is-empty .bk-day-num { color: var(--bk-ink-faint); }

.bk-first-avail-wrap { margin: 4px 0 14px; min-height: 20px; }
.bk-textbtn {
  appearance: none; border: 0; background: transparent;
  font: inherit; font-size: 0.92rem; font-weight: 600;
  color: var(--bk-teal); cursor: pointer;
  padding: 8px 2px; min-height: 40px;
  text-decoration: underline; text-decoration-color: var(--bk-brass-line);
  text-underline-offset: 3px;
}
.bk-textbtn[hidden] { display: none; }
.bk-textbtn:hover { color: var(--bk-teal-700); }

/* ── Provider rail (v2) — the memorable moment: a contributor strip, not a
   toolbar. Generous medallions, grayscale-to-color on select, a crimson ring +
   slight scale on the active chip, tactile press states. Hidden entirely (via
   [hidden]) when the slots response carries no `providers` — pre-restart
   backend, zero-regression fallback. ─────────────────────────────────────── */
.bk-provider-rail { margin: 0 0 16px; }
.bk-provider-rail[hidden] { display: none; }
.bk-provider-rail-label {
  margin: 0 0 10px;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bk-ink-faint);
  font-weight: 700;
}
.bk-provider-chips {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  margin: 0 0 -4px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.bk-provider-chip {
  appearance: none;
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 84px;
  min-height: 44px;
  padding: 4px 2px 6px;
  border: 0;
  background: transparent;
  color: var(--bk-ink);
  border-radius: var(--bk-radius);
  cursor: pointer;
  transition: transform 0.16s var(--bk-ease), opacity 0.16s var(--bk-ease);
}
.bk-provider-chip:hover { transform: translateY(-1px); }
.bk-provider-chip:active { transform: translateY(0) scale(0.96); }
.bk-provider-chips.has-active .bk-provider-chip:not(.is-active) { opacity: 0.55; }
.bk-provider-chip:disabled, .bk-provider-chip.is-empty { cursor: not-allowed; opacity: 0.42; }
.bk-provider-chip:disabled:hover { transform: none; }
/* An empty-but-ACTIVE chip stays tappable (tap clears the filter) — restore
   the pointer + enough opacity to read as interactive. */
.bk-provider-chip.is-empty.is-active { cursor: pointer; opacity: 0.72; }

.bk-provider-medallion {
  width: clamp(56px, 15vw, 64px);
  height: clamp(56px, 15vw, 64px);
  border-radius: 50%;
  display: block;
  overflow: hidden;
  background: var(--bk-paper-sink);
  box-shadow: var(--bk-shadow-sm);
  transition: box-shadow 0.2s var(--bk-ease), transform 0.2s var(--bk-ease);
}
.bk-provider-medallion-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(85%) saturate(0.9);
  transition: filter 0.35s var(--bk-ease);
}
.bk-provider-chip.is-active .bk-provider-medallion-img { filter: grayscale(0%) saturate(1); }
.bk-provider-medallion-initials {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--bk-serif);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--bk-teal);
  background: rgba(200, 16, 46, 0.1);       /* crimson wash, ~10% */
  border: 1px solid rgba(200, 16, 46, 0.35); /* hairline crimson ring */
  box-sizing: border-box;
}
.bk-provider-chip.is-active .bk-provider-medallion {
  box-shadow: 0 0 0 3px var(--bk-paper-2), 0 0 0 5px var(--bk-teal), var(--bk-shadow-md);
  transform: scale(1.04);
}
.bk-provider-chip-meta { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 100%; }
.bk-provider-chip-name {
  font-family: var(--bk-serif);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--bk-ink);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-provider-chip.is-active .bk-provider-chip-name { color: var(--bk-teal-700); }
.bk-provider-chip-role {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bk-brass);
  font-weight: 700;
}
.bk-provider-chip-notimes {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bk-ink-faint);
}

/* ── Slot region (chips grouped morning/afternoon) ───────────────────── */
.bk-slot-region { min-height: 88px; }

/* Full-date heading over the slot list (Addendum-2 jumped-date fix) — the
   section-heading idiom at list scale: serif + short red rule. */
.bk-slot-date-heading {
  font-family: var(--bk-serif);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--bk-ink);
  margin: 0 0 14px;
  padding-bottom: 10px;
  position: relative;
}
.bk-slot-date-heading::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 40px; height: 2px;
  background: var(--bk-teal);
  border-radius: 2px;
}

/* Mobile chrome hidden in desktop columns mode (JS toggles the hidden attr;
   these classes carry display values that would beat the UA [hidden] rule). */
.bk-day-nav[hidden], .bk-first-avail-wrap[hidden] { display: none; }

/* "Next available: {date}" chip (Addendum 3) — a pill jump within loaded data,
   replacing the old scanning jump link. Crimson-wash chip, 44px target. */
.bk-next-avail {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 9px 16px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bk-teal);
  background: var(--bk-teal-wash);
  border: 1px solid var(--bk-teal-300);
  border-radius: var(--bk-radius-pill);
  cursor: pointer;
  transition: background 0.15s var(--bk-ease), border-color 0.15s var(--bk-ease),
              transform 0.12s var(--bk-ease);
}
.bk-next-avail::before {
  content: "\2192"; /* → */
  font-size: 1em;
  line-height: 1;
}
.bk-next-avail:hover { background: var(--bk-teal-wash-2); border-color: var(--bk-teal); }
.bk-next-avail:active { transform: scale(0.97); }
.bk-next-avail[hidden] { display: none; }
.bk-slot-group { margin-bottom: 18px; }
/* Fresh nodes every render (day change / provider filter toggle / layout flip)
   replay this on insertion — a CSS-only staggered reveal, no JS bookkeeping. */
.bk-slot-group { animation: bk-rise 0.4s var(--bk-ease) both; }
.bk-slot-group:nth-of-type(1) { animation-delay: 0.02s; }
.bk-slot-group:nth-of-type(2) { animation-delay: 0.08s; }
.bk-slot-group:nth-of-type(3) { animation-delay: 0.14s; }
.bk-slot-group-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bk-ink-faint); font-weight: 700;
  margin: 0 0 10px;
}
.bk-slot-group-label::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--bk-hair);
}
.bk-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}
/* Tagged pills (avatar + first name) need more room than a bare time chip. */
.bk-slot-grid-tagged { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.bk-slot {
  appearance: none;
  min-height: 44px;
  padding: 10px 8px;
  border: 1px solid var(--bk-line);
  background: var(--bk-paper-2);
  border-radius: var(--bk-radius);
  color: var(--bk-teal);
  font: inherit;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform 0.12s var(--bk-ease), border-color 0.15s var(--bk-ease),
              background 0.15s var(--bk-ease), box-shadow 0.15s var(--bk-ease);
}
.bk-slot:hover { border-color: var(--bk-teal-300); background: var(--bk-teal-wash); box-shadow: var(--bk-shadow-sm); }
.bk-slot:active { transform: scale(0.94); }
.bk-slot.is-selected {
  background: var(--bk-teal); border-color: var(--bk-teal); color: #fff;
  box-shadow: var(--bk-shadow-md);
}
.bk-slot-empty {
  color: var(--bk-ink-soft);
  font-size: 0.98rem;
  padding: 14px 0;
}

/* Tagged slot pill — leading 20px avatar + provider first name (mobile default,
   also the fallback on desktop before/without a provider filter narrows the
   layout to columns). */
.bk-slot-tagged {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding: 8px 10px;
}
.bk-slot-avatar {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  background: var(--bk-paper-sink);
}
.bk-slot-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-slot-avatar-initials {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--bk-serif);
  font-weight: 700;
  font-size: 0.6rem;
  color: var(--bk-teal);
  background: rgba(200, 16, 46, 0.1);
}
.bk-slot-meta { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.bk-slot-time { font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1.2; }
.bk-slot-provider-name {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--bk-ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-slot.is-selected .bk-slot-provider-name { color: var(--bk-teal-wash-2); }

/* ── Desktop provider columns (>=900px, v2) — editorial columns: hairline
   separators, headshot header with a red-overline role above a serif name
   carrying the section-heading's short red rule. Below 900px this collapses
   to a single stacked column (defensive — the JS only builds this DOM once
   isDesktopLayout() is true, but the CSS degrades safely either way). ────── */
.bk-slot-columns { display: grid; grid-template-columns: 1fr; gap: 22px; }
.bk-slot-column-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 0 16px; }
.bk-column-medallion {
  width: 52px; height: 52px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  background: var(--bk-paper-sink);
  box-shadow: var(--bk-shadow-sm);
}
.bk-column-medallion-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-column-medallion-initials {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--bk-serif);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--bk-teal);
  background: rgba(200, 16, 46, 0.1);
  border: 1px solid rgba(200, 16, 46, 0.35);
  box-sizing: border-box;
}
.bk-column-role {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bk-brass);
  font-weight: 700;
}
.bk-column-name {
  margin: 0;
  font-family: var(--bk-serif);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--bk-ink);
  padding-bottom: 9px;
  position: relative;
}
.bk-column-name::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 30px; height: 2px;
  background: var(--bk-teal);
  border-radius: 2px;
}
/* Multi-day availability groups inside a column (Addendum 2): serif date over a
   red hairline, then the pill chips chronologically. Fresh nodes each render →
   the rise animation replays (CSS-only stagger, reduced-motion reset below). */
.bk-col-day {
  margin: 0 0 18px;
  animation: bk-rise 0.4s var(--bk-ease) both;
}
.bk-col-day:nth-of-type(1) { animation-delay: 0.02s; }
.bk-col-day:nth-of-type(2) { animation-delay: 0.07s; }
.bk-col-day:nth-of-type(3) { animation-delay: 0.12s; }
.bk-col-day:nth-of-type(n+4) { animation-delay: 0.16s; }
.bk-col-day-heading {
  font-family: var(--bk-serif);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--bk-ink);
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bk-brass-line); /* red hairline */
}
.bk-col-day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 6px;
}
.bk-column-empty {
  color: var(--bk-ink-faint);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 4px 0 0;
  max-width: 12rem;
}
/* Per-column "Show more dates (N)" expander (client-side; data already loaded). */
.bk-col-more {
  display: block;
  margin-top: 2px;
  padding-left: 0;
  text-align: left;
}

/* Zero-availability empty state (whole window, either layout) — honest copy +
   the office phone, in the card idiom. */
.bk-window-empty {
  padding: 26px 24px;
  background: var(--bk-paper-2);
  border: 1px solid var(--bk-line);
  border-left: 3px solid var(--bk-teal);
  border-radius: var(--bk-radius);
  box-shadow: var(--bk-shadow-sm);
  max-width: 30rem;
}
.bk-window-empty-lead {
  font-family: var(--bk-serif);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--bk-ink);
  margin: 0 0 8px;
}
.bk-window-empty-call {
  color: var(--bk-ink-soft);
  font-size: 0.98rem;
  margin: 0;
}
@media (min-width: 900px) {
  .bk-main { max-width: 54rem; } /* same magazine page, one spread deeper */
  .bk-slot-columns {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(180px, 1fr);
    gap: 0;
    overflow-x: auto;
    border-top: 1px solid var(--bk-hair);
  }
  .bk-slot-column { padding: 18px 22px 4px; border-left: 1px solid var(--bk-hair); }
  .bk-slot-column:first-child { border-left: 0; padding-left: 2px; }
}

/* Skeleton shimmer while slots load */
.bk-skeleton {
  background: linear-gradient(100deg, var(--bk-paper-sink) 30%, var(--bk-paper-2) 50%, var(--bk-paper-sink) 70%);
  background-size: 200% 100%;
  animation: bk-shimmer 1.2s linear infinite;
  border-radius: var(--bk-radius);
}
.bk-skeleton-slot { height: 44px; }
.bk-skeleton-line { height: 16px; border-radius: 6px; margin-bottom: 10px; }
.bk-skeleton-short { width: 55%; }
.bk-skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
@keyframes bk-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── Form ────────────────────────────────────────────────────────────── */
.bk-form { display: grid; gap: 4px; }
.bk-field { margin-bottom: 14px; }
.bk-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bk-ink-soft);
  margin-bottom: 6px;
}
.bk-optional { font-weight: 400; color: var(--bk-ink-faint); }
.bk-input {
  display: block;
  width: 100%;
  padding: 13px 15px;
  min-height: 48px;
  font: inherit;
  font-size: 16px; /* >=16px prevents iOS zoom-on-focus */
  color: var(--bk-ink);
  background: var(--bk-paper-2);
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-radius);
  transition: border-color 0.15s var(--bk-ease), box-shadow 0.15s var(--bk-ease), background 0.15s var(--bk-ease);
}
.bk-input::placeholder { color: var(--bk-ink-faint); }
.bk-input:hover { border-color: var(--bk-teal-300); }
.bk-input:focus {
  outline: none;
  border-color: var(--bk-teal);
  background: #fff;
  color: var(--bk-ink); /* pair with background so this state is never text-less */
  box-shadow: 0 0 0 3px var(--bk-teal-wash);
}
.bk-input:invalid:not(:placeholder-shown) { border-color: var(--bk-danger-line); }

.bk-check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 6px 0 4px;
  margin-bottom: 14px;
  min-height: 44px;
  cursor: pointer;
  font-size: 0.98rem;
  color: var(--bk-ink);
}
.bk-check input {
  appearance: none;
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin-top: 1px;
  border: 1.5px solid var(--bk-line);
  border-radius: 6px;
  background: var(--bk-paper-2);
  cursor: pointer;
  transition: background 0.15s var(--bk-ease), border-color 0.15s var(--bk-ease);
  position: relative;
}
.bk-check input:checked { background: var(--bk-teal); border-color: var(--bk-teal); }
.bk-check input:checked::after {
  content: "";
  position: absolute; left: 7px; top: 3px;
  width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.bk-consent {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--bk-ink-faint);
  margin: 6px 0 18px;
  padding: 12px 14px;
  background: var(--bk-paper-sink);
  border-radius: var(--bk-radius);
  border: 1px solid var(--bk-hair-2);
}

/* Honeypot — physically off-canvas but still in the DOM (not display:none, so
   naive bots that skip hidden fields still trip it). */
.bk-hp {
  position: absolute !important;
  left: -9999px; top: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ── Review + confirm summaries ──────────────────────────────────────── */
.bk-review {
  margin: 0 0 22px;
  padding: 4px 0;
  border-top: 1px solid var(--bk-hair);
}
.bk-review-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--bk-hair);
}
.bk-review-dt {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bk-ink-faint);
  flex: 0 0 auto;
}
.bk-review-dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  color: var(--bk-ink);
}
.bk-review-dd.bk-review-hero {
  font-family: var(--bk-serif);
  font-size: 1.15rem;
  color: var(--bk-teal);
}

/* "with {display_name}" row (review + confirmation, v2) — small medallion. */
.bk-review-row-provider { align-items: center; }
.bk-review-dd-provider { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.bk-review-medallion {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  background: var(--bk-paper-sink);
}
.bk-review-medallion-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-review-medallion-initials {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--bk-serif);
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--bk-teal);
  background: rgba(200, 16, 46, 0.1);
}
.bk-review-provider-name { font-weight: 600; color: var(--bk-ink); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.bk-btn {
  appearance: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--bk-radius);
  padding: 14px 22px;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  transition: transform 0.14s var(--bk-ease), background 0.15s var(--bk-ease),
              box-shadow 0.15s var(--bk-ease), border-color 0.15s var(--bk-ease);
}
.bk-btn-block { width: 100%; }
.bk-btn:active { transform: translateY(1px); }
.bk-btn[disabled], .bk-btn.is-busy { cursor: not-allowed; }

.bk-btn-primary {
  background: var(--bk-teal);
  color: #fff;
  box-shadow: var(--bk-shadow-md);
}
.bk-btn-primary:hover:not([disabled]):not(.is-busy) { background: var(--bk-teal-700); box-shadow: var(--bk-shadow-lg); }
.bk-btn-primary[disabled] { opacity: 0.55; box-shadow: none; }

.bk-btn-ghost {
  background: var(--bk-paper-2);
  color: var(--bk-teal);
  border-color: var(--bk-line);
}
.bk-btn-ghost:hover:not([disabled]) { border-color: var(--bk-teal-300); background: var(--bk-teal-wash); }

.bk-btn-danger {
  background: transparent;
  color: var(--bk-danger);
  border-color: var(--bk-danger-line);
}
.bk-btn-danger:hover:not([disabled]) { background: var(--bk-danger-wash); }

.bk-btn-call { width: 100%; max-width: 22rem; margin-top: 6px; }

/* Spinner shown while a button is busy */
.bk-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  display: none;
  animation: bk-spin 0.7s linear infinite;
}
.bk-btn-ghost .bk-spinner, .bk-btn-danger .bk-spinner {
  border-color: rgba(200, 16, 46, 0.25); border-top-color: var(--bk-teal);
}
.bk-btn.is-busy .bk-spinner { display: inline-block; }
.bk-btn.is-busy .bk-btn-label { opacity: 0.85; }
@keyframes bk-spin { to { transform: rotate(360deg); } }

/* ── Confirmation flourish ───────────────────────────────────────────── */
.bk-step-confirm { text-align: center; }
.bk-confirm-mark { display: flex; justify-content: center; margin: 8px 0 18px; }
.bk-check-svg { width: 76px; height: 76px; }
.bk-check-ring {
  stroke: var(--bk-teal-300); stroke-width: 2;
  stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: bk-draw 0.6s var(--bk-ease) 0.1s forwards;
}
.bk-check-tick {
  stroke: var(--bk-teal); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: bk-draw 0.4s var(--bk-ease) 0.5s forwards;
}
@keyframes bk-draw { to { stroke-dashoffset: 0; } }
/* The confirm heading is centered — center its red rule too. */
.bk-h-confirm { text-align: center; }
.bk-h-confirm::after { left: 50%; transform: translateX(-50%); }
.bk-confirm-review { text-align: left; max-width: 26rem; margin-left: auto; margin-right: auto; }
.bk-confirm-note {
  color: var(--bk-ink-soft);
  font-size: 0.95rem;
  margin: 0 auto 20px;
  max-width: 30rem;
}
.bk-confirm-note[hidden] { display: none; }
.bk-confirm-actions { display: flex; justify-content: center; }
.bk-confirm-actions .bk-btn { min-width: 14rem; }

/* ── Alerts ──────────────────────────────────────────────────────────── */
.bk-alert {
  margin: 20px 0 0;
  padding: 14px 16px;
  background: var(--bk-danger-wash);
  border: 1px solid var(--bk-danger-line);
  border-left: 3px solid var(--bk-danger);
  border-radius: var(--bk-radius);
  color: #7a2a25;
  font-size: 0.95rem;
}
.bk-alert[hidden] { display: none; }

.bk-noscript {
  padding: 16px 18px;
  background: var(--bk-danger-wash);
  border: 1px solid var(--bk-danger-line);
  border-radius: var(--bk-radius);
  margin-bottom: 20px;
}
.bk-inline-link { color: var(--bk-teal); font-weight: 600; }

/* ── Sticky mobile summary bar ───────────────────────────────────────── */
.bk-summary-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  padding: 12px var(--bk-pad) calc(12px + env(safe-area-inset-bottom));
  background: var(--bk-teal);
  color: #fff;
  box-shadow: 0 -8px 24px -12px rgba(26, 26, 26, 0.5);
  transform: translateY(100%);
  transition: transform 0.32s var(--bk-ease);
}
.bk-summary-bar[hidden] { display: none; }
.bk-summary-bar.is-shown { transform: translateY(0); }
.bk-summary-text {
  display: block;
  max-width: var(--bk-maxw);
  margin: 0 auto;
  font-size: 0.92rem;
  font-weight: 500;
  text-align: center;
}
.bk-summary-text strong { color: #fff; font-family: var(--bk-serif); font-weight: 700; }

/* ── Manage page ─────────────────────────────────────────────────────── */
.bk-manage-summary { margin-bottom: 22px; }
.bk-manage-summary[aria-busy="false"] .bk-skeleton { display: none; }
.bk-manage-card {
  padding: 20px 22px;
  background: var(--bk-paper-2);
  border: 1px solid var(--bk-line);
  border-left: 3px solid var(--bk-teal);
  border-radius: var(--bk-radius);
  box-shadow: var(--bk-shadow-sm);
}
.bk-manage-hi { font-family: var(--bk-serif); font-size: 1.25rem; color: var(--bk-ink); margin: 0 0 4px; }
.bk-manage-what { font-size: 1.05rem; color: var(--bk-ink); margin: 0; }
.bk-manage-when { color: var(--bk-ink-soft); margin: 6px 0 0; }
.bk-manage-ics { margin: 0 0 18px; }
.bk-manage-ics[hidden] { display: none; }
.bk-manage-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.bk-manage-actions[hidden] { display: none; }
.bk-manage-actions .bk-btn { flex: 1 1 auto; }

.bk-confirm-panel, .bk-reschedule-panel {
  margin-top: 20px;
  padding: 20px 22px;
  background: var(--bk-paper-2);
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-radius-lg);
  box-shadow: var(--bk-shadow-md);
  animation: bk-rise 0.35s var(--bk-ease) both;
}
.bk-confirm-panel[hidden], .bk-reschedule-panel[hidden] { display: none; }
.bk-confirm-panel-q { font-family: var(--bk-serif); font-size: 1.25rem; color: var(--bk-ink); margin: 0 0 4px; }
.bk-confirm-panel-sub { color: var(--bk-ink-soft); font-size: 0.92rem; margin: 0 0 16px; }
.bk-confirm-panel-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.bk-confirm-panel-actions .bk-btn { flex: 1 1 auto; }
.bk-reschedule-panel .bk-textbtn { display: block; margin-top: 12px; }

/* ── Standalone (closed / expired) pages ─────────────────────────────── */
.bk-standalone { text-align: center; padding: clamp(20px, 8vw, 60px) 0; }
.bk-standalone-mark { display: flex; justify-content: center; margin-bottom: 20px; }
.bk-standalone .bk-h { text-align: center; padding-bottom: 18px; }
.bk-standalone .bk-h::after { left: 50%; transform: translateX(-50%); }
.bk-standalone .bk-lede { margin-left: auto; margin-right: auto; }
.bk-info-svg, .bk-phone-svg { width: 68px; height: 68px; }
.bk-info-ring { stroke: var(--bk-teal-300); stroke-width: 2; }
.bk-info-bar { stroke: var(--bk-teal); stroke-width: 3; stroke-linecap: round; }
.bk-info-dot { fill: var(--bk-teal); }
.bk-phone-glyph { stroke: var(--bk-teal); stroke-width: 2.4; stroke-linejoin: round; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.bk-footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--bk-hair);
  margin-top: auto;
  padding: 26px var(--bk-pad) calc(96px + env(safe-area-inset-bottom));
  background: var(--bk-paper-2);
}
.bk-footer-inner { max-width: var(--bk-maxw); margin: 0 auto; text-align: center; }
.bk-footer-lead {
  font-family: var(--bk-serif);
  font-size: 1.05rem;
  color: var(--bk-ink);
  margin: 0 0 4px;
}
.bk-footer-contact { margin: 0 0 8px; font-size: 0.95rem; color: var(--bk-ink-soft); }
.bk-footer-addr { color: var(--bk-ink-soft); }
.bk-dot { color: var(--bk-teal); margin: 0 8px; }
.bk-footer-link { color: var(--bk-teal); font-weight: 600; text-decoration: none; }
.bk-footer-link:hover { text-decoration: underline; text-decoration-color: var(--bk-brass-line); text-underline-offset: 3px; }
.bk-footer-fine { font-size: 0.8rem; color: var(--bk-ink-faint); margin: 0; }
.bk-footer-privacy { font-weight: 500; margin-left: 6px; }

/* On wider viewports the sticky bar is unnecessary — the choices stay on screen;
   still allowed to appear but footer padding can relax. */
@media (min-width: 40rem) {
  .bk-footer { padding-bottom: 40px; }
  .bk-choices { grid-template-columns: 1fr 1fr; }
}

/* ── Focus-visible (keyboard) — crimson double ring, never removed ────── */
:focus-visible {
  outline: none;
  box-shadow: var(--bk-focus);
}
.bk-input:focus-visible {
  box-shadow: 0 0 0 3px var(--bk-teal-wash), 0 0 0 4px var(--bk-teal);
  border-color: var(--bk-teal);
}
.bk-slot:focus-visible, .bk-day:focus-visible, .bk-choice:focus-visible,
.bk-type-card:focus-visible, .bk-btn:focus-visible, .bk-provider-chip:focus-visible {
  box-shadow: var(--bk-focus);
}

/* ── Reduced motion — honor the OS preference ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .bk-step:not([hidden]) > * { animation: none; opacity: 1; transform: none; }
  .bk-check-ring, .bk-check-tick { stroke-dashoffset: 0; animation: none; }
  .bk-summary-bar { transition: none; }
  .bk-slot-group { animation: none; opacity: 1; transform: none; }
  .bk-col-day { animation: none; opacity: 1; transform: none; }
  .bk-provider-medallion-img { transition: none; }
  .bk-provider-chip, .bk-provider-medallion { transition: none; }
}