/* Orli v3 · features · book a call: the dialog
   ---------------------------------------------------------------------------
   The system sheet (white, 1px line, 24px corners, the raised shadow) as a
   modal <dialog>. Narrow while it's only words; wide and tall once the
   calendar loads. Full screen on a phone. System tokens only.
   ------------------------------------------------------------------------- */

html.bk-open { overflow: hidden; }

.bk {
  box-sizing: border-box;
  width: min(36rem, 100vw - 2 * var(--o-space-4));
  max-width: none; max-height: calc(100dvh - 2 * var(--o-space-4));
  margin: auto; padding: 0;
  border: 1px solid var(--o-line); border-radius: var(--o-r-card);
  background: var(--o-surface); color: var(--o-ink);
  box-shadow: var(--o-shadow-raised);
  overflow: hidden;
}
.bk::backdrop { background: color-mix(in srgb, var(--o-ink) 34%, transparent); }
.bk.is-calendar { width: min(62rem, 100vw - 2 * var(--o-space-4)); height: min(54rem, 100dvh - 2 * var(--o-space-4)); }
.bk__in { display: flex; flex-direction: column; height: 100%; max-height: inherit; }

.bk__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--o-space-4);
  padding: var(--o-space-4) var(--o-space-4) var(--o-space-3) var(--o-space-6);
}
.bk.is-calendar .bk__head { border-block-end: 1px solid var(--o-line); padding-block-end: var(--o-space-4); }
.bk__title {
  font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui);
  letter-spacing: var(--o-track-heading);
}
.bk__title:focus { outline: none; }
.bk__title:focus-visible:not([data-quiet-focus]) { outline: var(--o-focus-ring); outline-offset: 4px; border-radius: 4px; }
/* Keyboard focus inside the calendar: the ring sits inside the frame. */
.bk__iframe:focus-visible { outline: var(--o-focus-ring); outline-offset: -3px; }

.bk__intro { display: grid; gap: var(--o-space-4); padding: 0 var(--o-space-6) var(--o-space-6); overflow: auto; }
.bk__lead { font-size: var(--o-text-lead); line-height: var(--o-lh-lead); text-wrap: pretty; }
.bk__text { color: var(--o-ink-2); text-wrap: pretty; }
/* Opened from the contact page: no lead, so what happens next leads. */
.bk__lead[hidden] + .bk__text { color: var(--o-ink); }
.bk__actions { margin-block-start: var(--o-space-2); }
.bk__note { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); text-wrap: pretty; }

.bk__frame { position: relative; flex: 1 1 auto; min-height: 0; background: var(--o-canvas); }
.bk__iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; opacity: 0; transition: opacity var(--o-t-enter) var(--o-ease); }
.bk__frame.is-ready .bk__iframe { opacity: 1; }
.bk__frame .s-loader { background: var(--o-canvas); }

.bk__foot {
  display: grid; gap: var(--o-space-1);
  padding: var(--o-space-3) var(--o-space-6);
  border-block-start: 1px solid var(--o-line);
  font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2);
}
.bk__foot [data-bk-slow] { color: var(--o-ink); font-weight: 600; }

/* A phone: the whole screen. */
@media (max-width: 599px) {
  .bk, .bk.is-calendar {
    width: 100vw; height: 100dvh; max-height: 100dvh;
    border: 0; border-radius: 0;
  }
  .bk__head { padding-inline-start: var(--o-space-4); }
  .bk__intro { padding-inline: var(--o-space-4); }
  .bk__foot { padding-inline: var(--o-space-4); }
  .bk:not(.is-calendar) .bk__intro { align-content: start; }
}

/* Arriving and leaving: one quiet move. */
.bk[open] { animation: bk-in var(--o-t-enter) var(--o-ease) both; }
.bk[open]::backdrop { animation: bk-fade var(--o-t-enter) var(--o-ease) both; }
.bk.is-closing { animation: bk-out 160ms var(--o-ease) both; }
.bk.is-closing::backdrop { animation: bk-fade 160ms var(--o-ease) reverse both; }
@keyframes bk-in { from { opacity: 0; translate: 0 8px; } }
@keyframes bk-out { to { opacity: 0; translate: 0 4px; } }
@keyframes bk-fade { from { opacity: 0; } }
html[data-motion="reduced"] .bk[open], html[data-motion="reduced"] .bk.is-closing { animation-name: bk-fade; }
html[data-motion="reduced"] .bk.is-closing { animation-direction: reverse; }
html[data-motion="still"] :is(.bk[open], .bk[open]::backdrop, .bk.is-closing, .bk__iframe) { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion]) .bk[open] { animation-name: bk-fade; }
}

@media (forced-colors: active) { .bk { border: 1px solid CanvasText; } }
@media print { .bk { display: none !important; } html.bk-open { overflow: visible; } }