.availability-calendar{container-type:inline-size}
.availability-picker{border:1px solid #3b5363;background:#0b141b}
.availability-month-head{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;text-align:center;padding:.8rem;border-bottom:1px solid #314753}
.availability-month-head strong{font-family:var(--display);font-size:1.45rem;letter-spacing:.03em}
.availability-nav{width:34px;height:34px;justify-self:center;border:1px solid #496170;background:#101d25;color:#eff7fb;font-size:1.15rem;cursor:pointer}
.availability-nav:disabled{opacity:.35;cursor:not-allowed}
.availability-weekdays,.availability-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.availability-weekdays{padding:.65rem .75rem .25rem;color:#91a8b6;text-align:center;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.availability-grid{gap:3px;padding:.5rem .75rem .85rem}
.availability-day{position:relative;aspect-ratio:1;min-width:0;border:1px solid transparent;background:transparent;color:#bfd0da;font:inherit;cursor:pointer}
.availability-day:not(:disabled):hover,.availability-day.is-selected{border-color:var(--blue);background:#12384b;color:#fff}
.availability-day:disabled{color:#52646e}
.availability-day i{position:absolute;bottom:5px;left:50%;width:4px;height:4px;border-radius:50%;background:var(--blue);transform:translateX(-50%)}
.availability-times{border-top:1px solid #314753;padding:1rem}
.availability-times>p{margin:0 0 .75rem;color:#d8e7ed;font-family:var(--display);font-size:1.2rem}
.availability-times>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.calendar-slot{position:relative;display:block}
.calendar-slot input{position:absolute;opacity:0;pointer-events:none}
.calendar-slot span{display:grid;gap:.2rem;min-height:64px;padding:.75rem;border:1px solid #496170;background:#111c23;cursor:pointer}
.calendar-slot strong{font-size:1rem;color:#f2f7fa}
.calendar-slot small{color:#9bb0be;font-size:.72rem}
.calendar-slot:hover span,.calendar-slot input:focus-visible+span{border-color:#8ca7b6}
.calendar-slot input:checked+span{border-color:var(--blue);background:#12384b;box-shadow:inset 3px 0 var(--blue)}
.calendar-slot input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.availability-empty{border:1px dashed #3b5363;padding:2rem;text-align:center;color:#b3c5d0}

@container (min-width:620px){
 .availability-picker{display:grid;grid-template-columns:minmax(300px,1.05fr) minmax(280px,.95fr);grid-template-rows:auto auto 1fr;block-size:clamp(430px,70cqi,540px)}
 .availability-month-head{grid-column:1;grid-row:1}
 .availability-weekdays{grid-column:1;grid-row:2}
 .availability-grid{grid-column:1;grid-row:3;min-height:0;grid-template-rows:repeat(6,minmax(44px,1fr))}
 .availability-day{aspect-ratio:auto;min-height:44px}
 .availability-times{grid-column:2;grid-row:1/4;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;border-top:0;border-left:1px solid #314753}
 .availability-times>div{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:560px){
 .availability-weekdays{padding-inline:.4rem;font-size:.63rem}
 .availability-grid{padding-inline:.4rem}
 .availability-times>div{grid-template-columns:1fr 1fr}
 .availability-day{font-size:.84rem}
}