/* A calendar in the same paper-and-ink world as the studio. */
#qualification[data-step="calendar"]{width:min(100% - 32px,810px)}
#qualification{max-width:calc(100% - max(32px,calc(env(safe-area-inset-left) + env(safe-area-inset-right) + 24px)));max-height:calc(100dvh - max(32px,calc(env(safe-area-inset-top) + env(safe-area-inset-bottom) + 20px)));overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#829096 #f4f3ef;scroll-padding-block:80px 120px}
#qualification .question-content>.section-copy{max-width:65ch}
#booking-calendar{font-variant-numeric:tabular-nums}
.calendar-provider-note{padding:14px 16px;background:var(--paper);font-size:13px;line-height:1.6;color:var(--ink);margin-bottom:20px}
.calendar-preferences{display:flex;align-items:end;gap:18px;margin-bottom:24px}
.calendar-preferences label{display:block;min-width:0;flex:1;font-size:13px;color:var(--muted)}
.calendar-preferences select{display:block;width:100%;min-height:48px;margin-top:6px;padding:10px 30px 10px 10px;border:1px solid #a7b0b5;background:#fff;color:var(--ink);font:inherit;font-size:16px;border-radius:0}
.calendar-preferences select:focus-visible{outline:2px solid #164e70;outline-offset:3px}
.calendar-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px}
.calendar-month-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;min-height:44px}
.calendar-month-heading h3,.calendar-times h3{font-size:18px;line-height:1.4;font-weight:500;letter-spacing:-.025em;text-wrap:initial}
.calendar-month-heading>div{display:flex}
.calendar-month-heading button{display:grid;place-items:center;width:44px;min-height:44px;padding:8px;background:transparent}
.calendar-month-heading button:hover:not(:disabled){background:var(--paper)}
.calendar-weekdays,.calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.calendar-weekdays{margin-bottom:4px;color:var(--muted);font-size:12px;text-align:center}
.calendar-weekdays span{padding-block:6px}
.calendar-days>span,.calendar-days>button{min-height:44px;display:grid;place-items:center;font-size:14px;line-height:1;padding:0;background:transparent;border:1px solid transparent}
.calendar-days>button{color:var(--ink);border-color:#6b767c}
.calendar-days>button:hover{background:var(--paper);border-color:var(--ink)}
.calendar-days>button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.calendar-days>span{color:#a2aaaf}
.calendar-days>button[data-today="true"]{text-decoration:underline;text-underline-offset:5px}
.calendar-days>button:focus-visible{outline-offset:1px;position:relative;z-index:1}
.calendar-times{border-left:1px solid var(--line);padding-left:26px}
.calendar-times h3{min-height:44px;display:flex;align-items:center;margin-bottom:14px}
.calendar-time-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:292px;overflow:auto;padding:3px;scrollbar-color:#829096 #f4f3ef}
.calendar-time-options button{min-height:44px;padding:9px 5px;border:1px solid #a7b0b5;background:#fff;color:var(--ink);font-size:14px;line-height:1.3}
.calendar-time-options button:hover{border-color:var(--ink);background:var(--paper)}
.calendar-time-options button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.calendar-time-options button:focus-visible{outline-offset:0}
.calendar-status{font-size:13px;color:var(--muted);line-height:1.6;margin-top:20px;min-height:22px}
.calendar-selection{padding-block:18px;border-block:1px solid var(--line);font-size:15px;line-height:1.6;margin-top:20px;color:var(--ink)}
#contact-slot{margin:0 0 20px}
#confirmed-slot{margin:0 0 20px}
#calendar-retry{margin-top:8px}
#qualification .form-progress>span{transform:scaleX(.166667)}
#qualification[data-busy="true"] .form-actions .button{cursor:wait}
@media(max-width:600px){
 #qualification,#qualification[data-step="calendar"]{width:100%;max-width:100%;max-height:100svh;max-height:100dvh;margin:auto;border-inline:0}
 #qualification .dialog-header{position:sticky;top:0;z-index:3;background:#fff;padding-top:max(10px,env(safe-area-inset-top));padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
 #qualification .question-content{padding:23px max(18px,env(safe-area-inset-right)) max(26px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}
 .calendar-layout{grid-template-columns:1fr;gap:24px}
 .calendar-times{padding:20px 0 0;border-left:0;border-top:1px solid var(--line)}
 .calendar-times h3{min-height:0;margin-bottom:12px}
 .calendar-time-options{grid-template-columns:repeat(3,minmax(0,1fr));max-height:none;overflow:visible}
 .calendar-preferences{display:block;margin-bottom:20px}
 .calendar-preferences label+label{margin-top:14px}
 .calendar-provider-note{padding:12px;font-size:13px}
 .calendar-selection{font-size:14px}
 #qualification .form-actions{gap:12px;flex-wrap:wrap}
 #qualification .form-actions .button{min-width:0;max-width:100%;gap:18px;flex:1 1 190px;text-align:left}
 #qualification .form-actions .text-button{min-height:48px;flex-shrink:0}
 #qualification #saved-close{width:100%;gap:20px;text-align:left}
}
@media(prefers-reduced-motion:reduce){#qualification .form-progress>span{transition:none}}
#qualification .contact-fields>label:not(.consent){display:block;margin-top:18px}

#qualification:is([data-step="calendar"],[data-step="contact"]) .form-actions{position:sticky;bottom:0;z-index:2;background:#fff;border-top:1px solid var(--line);padding-block:14px;margin-bottom:-14px;flex-wrap:wrap;row-gap:10px}
.calendar-action-selection{flex-basis:100%;margin:0;color:var(--ink);font-size:14px;line-height:1.5;overflow-wrap:anywhere}
#qualification:not([data-step="calendar"]) .calendar-action-selection{display:none}
@media(max-width:600px){
 #qualification:is([data-step="calendar"],[data-step="contact"]) .form-actions{padding-bottom:max(14px,env(safe-area-inset-bottom));margin-bottom:0}
 #qualification .calendar-month{min-width:0}
 #qualification .calendar-weekdays,#qualification .calendar-days{width:calc(100% + 36px);margin-inline:-18px;gap:0}
 #qualification .calendar-days>button,#qualification .calendar-days>span{min-height:48px}
 #qualification .contact-fields>label>input:not([type="checkbox"]){font-size:16px;scroll-margin-block:90px 150px}
 #qualification .calendar-status,#qualification .calendar-provider-note,#qualification .calendar-selection,#qualification .form-error{overflow-wrap:anywhere}
}
@media(max-height:480px){
 #qualification .dialog-header{position:static}
 #qualification .question-content{padding-top:18px}
 #qualification:is([data-step="calendar"],[data-step="contact"]) .form-actions{position:static}
 .calendar-time-options{max-height:none;overflow:visible}
}
#qualification.booking-keyboard{position:fixed;inset:var(--plp-visual-top,0px) 0 auto;max-height:var(--plp-visual-height,100dvh);margin-block:0;scroll-padding-block:16px}
#qualification.booking-keyboard .dialog-header,#qualification.booking-keyboard:is([data-step="calendar"],[data-step="contact"]) .form-actions{position:static}
#qualification.booking-keyboard .contact-fields>label>input:not([type="checkbox"]){scroll-margin-block:16px}
#qualification.booking-keyboard .calendar-time-options{max-height:none;overflow:visible}
