/* digotech/booking: the booking dialog — a centred modal with a host column (who, length, time zone, channel), a date
   picker + open times, the kit form's own fields and a slide-to-confirm, then a ticket. On phones it is a sheet rising
   from the bottom. The kit form's date / time / channel fields are filled by view.js and hidden (.dg-bk__ctl). */
.dg-bk{
  --dg-bk-w:calc(var(--s-9) * 8.6);
  --dg-bk-h:calc(var(--s-9) * 6.2);
  --dg-bk-side:calc(var(--s-9) * 2.4);
  --dg-bk-slots:calc(var(--s-9) * 1.9);
  --dg-bk-form:calc(var(--s-9) * 4.6);
  --dg-bk-commit:calc(var(--s-9) * 2.8);
  --dg-bk-sheet-h:92dvh;
  --dg-bk-lift:0 30px 80px var(--shadow);
  --dg-bk-ring:0 0 0 3px var(--accent-tint);
  --dg-bk-label-gap:6px;
  --dg-bk-seg-pad:3px;
  --dg-bk-seg-r:6px;
  --dg-bk-seg-h:32px;
  --dg-bk-seg-shadow:0 1px 3px var(--shadow);
  --dg-bk-knob-edge:0 2px 0 var(--accent-edge);
  --dg-bk-chk:14px;
  --dg-bk-chk-i:9px;
  --dg-bk-off:.45;
  --dg-bk-notch:20px;
  --dg-bk-perf:2px;
  --dg-bk-dash:30;
  --dg-bk-torn:translate(40px, 90px) rotate(14deg);
  --dg-bk-shadow-ticket:drop-shadow(0 16px 30px var(--shadow));
  --dg-bk-spring:cubic-bezier(.34,1.56,.64,1);
  --dg-bk-tear:cubic-bezier(.3,.1,.3,1);
  --dg-bk-dur-tear:700ms;
  --dg-bk-dur-check:700ms;
  --dg-bk-dur-draw:500ms;
  --dg-bk-delay-draw:250ms;
  --dg-bk-dur-shake:360ms;
  --dg-bk-now:0s;
  --dg-bk-z-up:1;
  width:min(var(--dg-bk-w), calc(100vw - var(--s-6)));
  height:min(var(--dg-bk-h), calc(100dvh - var(--s-6)));
  max-width:none;
  max-height:none;
  padding:0;
  border:1px solid var(--rule);
  border-radius:var(--r-card);
  overflow:hidden;
  background:var(--paper);
  color:var(--ink);
  box-shadow:var(--dg-bk-lift);
}
.dg-bk[open]{display:flex;flex-direction:column;animation:dg-bk-in var(--dur-m) var(--ease-out)}
.dg-bk::backdrop{background:var(--scrim);animation:dg-bk-fade var(--dur-m) var(--ease-out)}
html:has(.dg-bk[open]){overflow:hidden}
.dg-bk :where(h2,h3,p,ul,dl){margin:0}
@keyframes dg-bk-in{from{opacity:0;transform:translateY(var(--s-4)) scale(.98)}}
@keyframes dg-bk-up{from{transform:translateY(100%)}}
@keyframes dg-bk-fade{from{opacity:0}}

/* head + three-step progress */
.dg-bk__head{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--rule)}
.dg-bk__ttl{display:grid;gap:var(--s-1)}
.dg-bk__ttl .mono{font-size:var(--t-2xs)}
.dg-bk__head h2{font-size:var(--t-xl)}
.dg-bk__prog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-1);padding:0 var(--s-5)}
.dg-bk__prog i{height:calc(var(--s-1) / 2);border-radius:var(--r);background:var(--rule);transition:background-color var(--dur-m) var(--ease-out)}
.dg-bk__prog i.is-on{background:var(--accent-fill)}
.dg-bk__body{flex:1;display:grid;grid-template-columns:var(--dg-bk-side) minmax(0,1fr);min-height:0;overflow:auto;scrollbar-width:thin}

/* host column */
.dg-bk__host{display:grid;gap:var(--s-4);align-content:start;padding:var(--s-5);border-right:1px solid var(--rule);background:var(--paper-2)}
.dg-bk__logo{display:grid;place-items:center;width:var(--s-7);height:var(--s-7);border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--card);color:var(--brand-mark)}
.dg-bk__logo svg{width:var(--s-6);height:auto}
.dg-bk__who{display:grid;gap:var(--s-1)}
.dg-bk__who h3{font-size:var(--t-l)}
.dg-bk__meta{list-style:none;padding:0;display:grid;gap:var(--s-2);font-size:var(--t-s);color:var(--ink-2)}
.dg-bk__meta li{display:flex;align-items:center;gap:var(--s-2)}
.dg-bk__meta svg{width:var(--s-4);height:var(--s-4);color:var(--ink-3)}
/* channel switch: a pill slides under the picked choice (view.js measures it) */
.dg-bk__ch{--dg-bk-pill-x:0px;--dg-bk-pill-w:0px;position:relative;display:flex;gap:var(--dg-bk-seg-pad);padding:var(--dg-bk-seg-pad);border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--paper-2)}
.dg-bk__ch[hidden]{display:none}
.dg-bk__ch button{position:relative;z-index:var(--dg-bk-z-up);flex:1;min-height:var(--dg-bk-seg-h);padding:0 var(--s-2);border:0;border-radius:var(--dg-bk-seg-r);background:transparent;font:600 var(--t-xs)/1 var(--font-body);color:var(--ink-2);white-space:nowrap;cursor:pointer;transition:color var(--dur) var(--ease-press)}
.dg-bk__ch button[aria-pressed="true"]{color:var(--ink)}
.dg-bk__pill{position:absolute;top:var(--dg-bk-seg-pad);bottom:var(--dg-bk-seg-pad);left:0;width:var(--dg-bk-pill-w);border-radius:var(--dg-bk-seg-r);background:var(--card);box-shadow:var(--dg-bk-seg-shadow);transform:translateX(var(--dg-bk-pill-x));transition:transform var(--dur-m) var(--ease-out),width var(--dur-m) var(--ease-out)}
/* the picked day + time, shown from step 2 */
.dg-bk__pick{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3);border:1px solid var(--accent-fill);border-radius:var(--r);background:var(--accent-tint);font:600 var(--t-s)/1.35 var(--font-body);color:var(--ink)}
.dg-bk__pick[hidden]{display:none}
.dg-bk__pick svg{width:var(--s-4);height:var(--s-4);color:var(--accent)}
.dg-bk__pick button{margin-left:auto;padding:0;border:0;background:none;color:var(--accent);font:600 var(--t-xs)/1 var(--font-body);text-decoration:underline;cursor:pointer}
.dg-bk__get{list-style:none;padding:var(--s-4) 0 0;border-top:1px solid var(--rule);display:grid;gap:var(--s-2);font-size:var(--t-xs);color:var(--ink-2)}
.dg-bk__get li{display:flex;align-items:flex-start;gap:var(--s-2)}
.dg-bk__chk{display:inline-grid;place-items:center;flex:none;width:var(--dg-bk-chk);height:var(--dg-bk-chk);margin-top:calc((1lh - var(--dg-bk-chk)) / 2);border-radius:50%;background:var(--accent-fill);color:var(--on-accent)}
.dg-bk__chk svg{width:var(--dg-bk-chk-i);height:var(--dg-bk-chk-i)}

/* steps */
.dg-bk__main{min-width:0;padding:var(--s-5)}
.dg-bk__step{display:none;gap:var(--s-5)}
.dg-bk__step.is-on{display:grid;animation:dg-bk-panel var(--dur-m) var(--ease-out)}
@keyframes dg-bk-panel{from{opacity:0;transform:translateY(var(--s-1))}}
.dg-bk__step--when.is-on{grid-template-columns:minmax(0,1fr) var(--dg-bk-slots);align-items:start}

/* date picker */
.dg-bk__dp{display:grid;gap:var(--s-3)}
.dg-bk__dp-head{display:flex;justify-content:space-between;align-items:center;font:700 var(--t-m)/1.2 var(--font-display)}
.dg-bk__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s-1);text-align:center}
.dg-bk__dow{font:500 var(--t-2xs)/2 var(--font-mono);color:var(--ink-3)}
.dg-bk__grid button{justify-self:center;width:100%;max-width:var(--s-7);aspect-ratio:1;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;color:var(--ink);font:400 var(--t-s)/1 var(--font-body);font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color var(--dur) var(--ease-press),border-color var(--dur) var(--ease-press)}
.dg-bk__grid button:not(:disabled){background:var(--accent-tint);color:var(--accent);font-weight:600}
.dg-bk__grid button:disabled{color:var(--ink-3);opacity:var(--dg-bk-off);cursor:not-allowed}
.dg-bk__grid button.is-today{border-color:var(--accent-fill)}
.dg-bk__grid button[aria-pressed="true"]{background:var(--accent-fill);color:var(--on-accent)}

/* open times: picking one slides a "Continue" button out beside it */
.dg-bk__slots{display:grid;gap:var(--s-3);align-content:start}
.dg-bk__day{font:700 var(--t-m)/1.2 var(--font-display);color:var(--ink)}
.dg-bk__day small{display:block;margin-top:var(--s-1);font:400 var(--t-xs)/1.3 var(--font-body);color:var(--ink-3)}
.dg-bk__list{display:grid;gap:var(--s-2)}
.dg-bk__slot{display:grid;grid-template-columns:minmax(0,1fr) 0fr;gap:0;transition:grid-template-columns var(--dur-m) var(--ease-out),gap var(--dur-m) var(--ease-out)}
.dg-bk__slot.is-on{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-2)}
.dg-bk__slot > button{min-width:0;min-height:var(--ctl);border-radius:var(--r);font:600 var(--t-s)/1 var(--font-mono);cursor:pointer}
.dg-bk__time{display:grid;place-content:center;gap:var(--s-1);border:1px solid var(--accent-fill);background:transparent;color:var(--accent);transition:background-color var(--dur) var(--ease-press),color var(--dur) var(--ease-press)}
.dg-bk__time small{font:400 var(--t-2xs)/1 var(--font-body);color:var(--ink-3)}
.dg-bk__time:disabled{border-color:var(--rule);color:var(--ink-3);text-decoration:line-through;cursor:not-allowed}
.dg-bk__slot.is-on .dg-bk__time{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.dg-bk__slot.is-on .dg-bk__time small{color:var(--paper)}
.dg-bk__slot > .dg-bk__go{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-1);overflow:hidden;padding:0;border:0;background:var(--accent-fill);color:var(--on-accent);white-space:nowrap;font-family:var(--font-body);visibility:hidden;opacity:0;transition:opacity var(--dur) var(--ease-out),visibility var(--dg-bk-now) linear var(--dur)}
.dg-bk__go svg{width:var(--s-4);height:var(--s-4)}
.dg-bk__slot.is-on .dg-bk__go{visibility:visible;opacity:1;transition:opacity var(--dur) var(--ease-out) var(--dur),visibility var(--dg-bk-now)}
.dg-bk__next{display:none}
.dg-bk__next svg{width:var(--icon-s);height:var(--icon-s)}
@media (hover: hover){
  .dg-bk__grid button:not(:disabled):hover{border-color:var(--accent-fill)}
  .dg-bk__time:hover:not(:disabled){background:var(--accent-tint)}
}

/* details: the kit form's fields in the design's look */
.dg-bk__step--who{max-width:var(--dg-bk-form)}
.dg-bk .dn-kit-form{gap:var(--s-4)}
.dg-bk .dg-bk__ctl,.dg-bk .dn-kit-form__actions{display:none}
.dg-bk .dn-kit-form__field{gap:var(--dg-bk-label-gap)}
.dg-bk .dn-kit-form__field > label{font-size:var(--t-s);font-weight:600}
.dg-bk .dn-kit-form__field > label small{font-weight:400;color:var(--ink-3)}
.dg-bk .dn-kit-form__field > :is(input,textarea){height:var(--ctl);padding-block:0;padding-inline-end:var(--s-3);border:1px solid var(--rule);border-radius:var(--r);background:var(--card);color:var(--ink);font:400 var(--t-m)/1 var(--font-body);transition:border-color var(--dur) var(--ease-press),box-shadow var(--dur) var(--ease-press)}
/* start padding left to feel.css when feel.js puts an icon in the field */
.dg-bk .dn-kit-form__field:not(.feel-fi) > :is(input,textarea){padding-inline-start:var(--s-3)}
.dg-bk .dn-kit-form__field > textarea{height:auto;min-height:calc(var(--ctl) * 2);padding-block:var(--s-2);line-height:1.45;resize:vertical}
.dg-bk .dn-kit-form__field > :is(input,textarea):focus{outline:none;border-color:var(--accent-fill);box-shadow:var(--dg-bk-ring)}
.dg-bk .dn-kit-form__field > [aria-invalid]{border-color:var(--p4)}
.dg-bk .dn-kit-form__error{font-size:var(--t-xs);color:var(--p4)}
.dg-bk .dn-kit-form__status{font-size:var(--t-s);color:var(--ink-2)}
.dg-bk .dn-kit-form__status:empty{display:none}
.dg-bk__nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.dg-bk__nav svg{width:var(--icon-s);height:var(--icon-s)}

/* slide to confirm (drag the knob to the end; a click, Enter or Space also confirms) */
.dg-bk__commit{--dg-bk-x:0px;position:relative;flex:1;display:flex;align-items:center;max-width:var(--dg-bk-commit);height:var(--ctl);padding:var(--s-1);border-radius:var(--r-pill);background:var(--paper-3);overflow:hidden;user-select:none;touch-action:pan-y}
.dg-bk__fill{position:absolute;inset:0 auto 0 0;width:calc(var(--dg-bk-x) + var(--ctl));background:var(--accent-tint)}
.dg-bk__label{position:absolute;inset:0;display:grid;place-items:center;padding-left:var(--ctl);font:600 var(--t-s)/1 var(--font-body);color:var(--ink-2);pointer-events:none}
.dg-bk__knob{position:relative;z-index:var(--dg-bk-z-up);display:grid;place-items:center;width:calc(var(--ctl) - var(--s-2));height:calc(var(--ctl) - var(--s-2));padding:0;border:0;border-radius:var(--r);background:var(--accent-fill);color:var(--on-accent);box-shadow:var(--dg-bk-knob-edge);cursor:grab;transform:translateX(var(--dg-bk-x))}
.dg-bk__knob svg{width:var(--s-4);height:var(--s-4)}
.dg-bk__commit:not(.is-drag) :is(.dg-bk__knob,.dg-bk__fill){transition:transform var(--dur-m) var(--dg-bk-spring),width var(--dur-m) var(--dg-bk-spring)}
.dg-bk__commit.is-drag .dg-bk__knob{cursor:grabbing}
.dg-bk__commit.is-done{background:var(--accent-fill)}
.dg-bk__commit.is-done .dg-bk__label{padding-left:0;color:var(--on-accent)}
.dg-bk__commit.is-err{animation:dg-bk-shake var(--dg-bk-dur-shake) var(--ease-press)}
@keyframes dg-bk-shake{25%{transform:translateX(calc(var(--s-1) * -1))}75%{transform:translateX(var(--s-1))}}

/* done: spring check + a ticket whose stub tears off */
.dg-bk__done{display:grid;justify-items:center;gap:var(--s-4);text-align:center}
.dg-bk__done h3{font-size:var(--t-xl)}
.dg-bk__check{display:grid;place-items:center;width:var(--s-8);height:var(--s-8);border-radius:50%;background:var(--accent-fill);color:var(--on-accent);animation:dg-bk-spring var(--dg-bk-dur-check) var(--dg-bk-spring) both}
.dg-bk__check svg{width:var(--s-6);height:var(--s-6);stroke-dasharray:var(--dg-bk-dash);stroke-dashoffset:var(--dg-bk-dash);animation:dg-bk-draw var(--dg-bk-dur-draw) var(--dg-bk-delay-draw) var(--ease-out) forwards}
@keyframes dg-bk-spring{from{opacity:0;transform:scale(.4)}}
@keyframes dg-bk-draw{to{stroke-dashoffset:0}}
.dg-bk__ticket{justify-self:stretch;display:grid;text-align:left;filter:var(--dg-bk-shadow-ticket);animation:dg-bk-pop var(--dur-morph) var(--ease-out)}
@keyframes dg-bk-pop{from{opacity:0;transform:translateY(var(--s-3)) scale(.96)}}
.dg-bk__tmain,.dg-bk__stub{padding:var(--s-5);border:1px solid var(--rule);background:var(--card)}
.dg-bk__tmain{display:grid;gap:var(--s-3);border-bottom:0;border-radius:var(--r-card) var(--r-card) 0 0}
.dg-bk__tmain h3{font-size:var(--t-xl)}
.dg-bk__tmain dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-2) var(--s-4);font-size:var(--t-s)}
.dg-bk__tmain dt{color:var(--ink-3)}
.dg-bk__tmain dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.dg-bk__perf{position:relative;height:0;margin-inline:var(--s-4);border-top:var(--dg-bk-perf) dashed var(--rule)}
.dg-bk__perf::before,.dg-bk__perf::after{content:"";position:absolute;top:calc((var(--dg-bk-notch) + var(--dg-bk-perf)) / -2);width:var(--dg-bk-notch);height:var(--dg-bk-notch);border-radius:50%;background:var(--paper)}
.dg-bk__perf::before{left:calc(var(--s-4) * -1 - var(--dg-bk-notch) / 2)}
.dg-bk__perf::after{right:calc(var(--s-4) * -1 - var(--dg-bk-notch) / 2)}
.dg-bk__stub{display:flex;justify-content:flex-end;align-items:center;gap:var(--s-3);border-top:0;border-radius:0 0 var(--r-card) var(--r-card);transform-origin:top left;transition:transform var(--dg-bk-dur-tear) var(--dg-bk-tear),opacity var(--dg-bk-dur-tear) var(--ease-out)}
.dg-bk__ticket.is-torn .dg-bk__stub{transform:var(--dg-bk-torn);opacity:0}
.dg-bk__note{font-size:var(--t-xs);color:var(--ink-3)}

/* tablet: the host column becomes a band over the steps */
@media (max-width: 991px){
  .dg-bk__body{grid-template-columns:minmax(0,1fr)}
  .dg-bk__host{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-2) var(--s-4);padding:var(--s-4) var(--s-5);border-right:0;border-bottom:1px solid var(--rule)}
  .dg-bk__logo{grid-row:1 / span 2}
  .dg-bk__meta{grid-column:2;grid-auto-flow:column;justify-content:start;gap:var(--s-4)}
  .dg-bk__ch{grid-column:3;grid-row:1 / span 2}
  .dg-bk__pick{grid-column:1 / -1}
  .dg-bk__get{display:none}
}
/* phone: a sheet from the bottom; times in three columns and a sticky "Continue" button */
@media (max-width: 767px){
  .dg-bk{width:100%;height:var(--dg-bk-sheet-h);margin:auto 0 0;border-inline:0;border-bottom:0;border-radius:var(--r-card) var(--r-card) 0 0}
  .dg-bk[open]{animation:dg-bk-up var(--dur-morph) var(--ease-out)}
  .dg-bk__host{grid-template-columns:auto minmax(0,1fr)}
  .dg-bk__meta,.dg-bk__ch{grid-column:1 / -1}
  .dg-bk__ch{grid-row:auto}
  .dg-bk__main{padding:var(--s-4)}
  .dg-bk__step--when.is-on{grid-template-columns:minmax(0,1fr)}
  .dg-bk__list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dg-bk__slot,.dg-bk__slot.is-on{grid-template-columns:minmax(0,1fr) 0fr;gap:0}
  .dg-bk__slot > .dg-bk__go{display:none}
  .dg-bk__next:not([hidden]){display:flex;position:sticky;bottom:0;width:100%}
  .dg-bk__next .wp-block-button__link{width:100%}
  .dg-bk__nav{flex-direction:column-reverse;align-items:stretch}
  .dg-bk__nav .wp-block-button__link{width:100%}
  .dg-bk__commit{max-width:none}
}

@media (prefers-reduced-motion: reduce){
  .dg-bk[open],.dg-bk::backdrop,.dg-bk__step.is-on,.dg-bk__commit.is-err,.dg-bk__check,.dg-bk__ticket{animation:none}
  .dg-bk__check svg{animation:none;stroke-dashoffset:0}
  .dg-bk__prog i,.dg-bk__pill,.dg-bk__slot,.dg-bk__slot > button,.dg-bk__stub,.dg-bk__commit:not(.is-drag) :is(.dg-bk__knob,.dg-bk__fill){transition:none}
}

/* editor: the closed dialog shows in place, so its texts can be checked */
.editor-styles-wrapper .dg-bk:not([open]){position:relative;display:flex;flex-direction:column;margin:0 auto}