/* The elastic calendar: a minimal booking picker. One month, pure white, grey numbers. The arrival pins a thin
   vermilion line to its day; the line follows the pointer between the days like a rubber band, and the departure
   pins its other end. The nights in between darken one after the other, and on the left the number of nights
   stretches its width with the stay. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #141414;           /* the chosen nights, the big number */
  --soft: #767676;          /* a free day */
  --faint: #cdcdcd;         /* a gone day, a booked night */
  --rule: #e7e7e7;          /* the hairlines */
  --accent: #e4471f;        /* the elastic line and its two pins */
  --cell-w: 52px;           /* a day, across */
  --cell-h: 58px;           /* a day, down */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Archivo Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}

/* ---------------------------------------------------------------- the picker */
.cal {
  display: grid;
  grid-template-columns: 252px auto;
  column-gap: 44px;
  align-items: stretch;
  padding: 8px 4px;
}

/* ---------------------------------------------------------------- the stay, on the left */
.cal__stay {
  display: flex;
  flex-direction: column;
  padding: 10px 40px 4px 0;
  border-right: 1px solid var(--rule);
}

.cal__label {
  margin: 0;
  font-size: 12px;
  font-weight: 560;
  font-stretch: 108%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--soft);
}

.cal__count {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 26px 0 0;
}

/* the big number: the script writes its width and weight on every frame (font-stretch, font-weight) */
.cal__num {
  display: block;
  margin: -0.12em 0 -0.16em;
  font-size: 184px;
  line-height: 1;
  font-weight: 200;
  font-stretch: 72%;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
  transition: color 0.4s ease;
  white-space: nowrap;
}

/* two figures (ten nights or more) are set a little smaller, so they keep inside the column */
.cal__num.is-two .cal__digits {
  font-size: 0.8em;
}

.cal__digits {
  display: inline-block;
  line-height: 1;
  transform-origin: 0 80%;
}

.cal.has-from .cal__num {
  color: var(--soft);
}

.cal.has-stay .cal__num {
  color: var(--ink);
}

.cal__unit {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 520;
  font-stretch: 100%;
  color: var(--soft);
}

.cal__dates {
  display: grid;
  gap: 10px;
  margin: auto 0 0;
  padding-top: 26px;
}

.cal__date {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}

.cal__date dt {
  font-size: 12px;
  font-weight: 560;
  font-stretch: 108%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--soft);
}

.cal__date dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}

.cal__date dd.is-empty {
  font-weight: 420;
  color: var(--faint);
}

/* Clear dates: on hover the words widen on the width axis and darken */
.cal__clear {
  align-self: flex-start;
  margin: 16px 0 0 -10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  font-stretch: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: font-stretch 0.35s cubic-bezier(0.34, 1.5, 0.5, 1), color 0.2s ease, opacity 0.25s ease;
}

.cal__clear:disabled {
  opacity: 0.32;
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .cal__clear:not(:disabled):hover {
    font-stretch: 118%;
    color: var(--accent);
  }
}

.cal__clear:not(:disabled):active {
  font-stretch: 118%;
  color: var(--accent);
}

.cal__clear:focus-visible,
.cal__nav:focus-visible {
  outline: 1.5px solid var(--ink);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- the month, on the right */
.cal__month {
  width: calc(var(--cell-w) * 7);
}

.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  margin-bottom: 12px;
}

.cal__title {
  flex: 1;
  margin: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 640;
  font-stretch: 104%;
  text-align: center;
  white-space: nowrap;
}

.cal__title span {
  display: inline-block;
}

.cal__nav {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: opacity 0.2s ease;
}

.cal__nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.35s cubic-bezier(0.34, 1.6, 0.5, 1);
}

.cal__nav:disabled {
  opacity: 0.22;
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .cal__nav[data-prev]:not(:disabled):hover svg {
    transform: translateX(-2px);
  }

  .cal__nav[data-next]:not(:disabled):hover svg {
    transform: translateX(2px);
  }
}

.cal__week {
  display: grid;
  grid-template-columns: repeat(7, var(--cell-w));
  padding-bottom: 6px;
}

.cal__week span {
  font-size: 11px;
  font-weight: 560;
  font-stretch: 108%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--faint);
}

/* the field: the line lives in an svg under the days, clipped at the edges of the month */
.cal__field {
  position: relative;
  height: calc(var(--cell-h) * 6);
  clip-path: inset(-2px -6px);
}

.cal__line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.cal__band {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cal__pin {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  opacity: 0;
}

.cal__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, var(--cell-w));
  grid-auto-rows: var(--cell-h);
}

/* ---------------------------------------------------------------- a day */
.day {
  --k: 0;
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--soft);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.day--blank {
  pointer-events: none;
}

/* the days of the months before and after, barely there: the line can still land on them */
.day--blank .day__num {
  color: #e6e6e6;
  font-weight: 380;
}

/* the number sits on a little patch of the page, so the line passes behind it and never crosses a figure.
   --k is how dark the day is: 0 free, 1 a night of the stay (the script tweens it) */
.day__num {
  position: relative;
  z-index: 1;
  display: block;
  padding: 2px 4px;
  border-radius: 6px;
  background: var(--page);
  font-size: 15px;
  line-height: 1.1;
  font-weight: calc(380 + var(--k) * 300);
  font-stretch: calc(96% + var(--k) * 8%);
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklab, var(--soft), var(--ink) calc(var(--k) * 100%));
}

/* a ring under the pointer, and under the keyboard's focus */
.day::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--faint);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.18s ease, transform 0.35s cubic-bezier(0.34, 1.6, 0.5, 1);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .cal:not(.is-choosing) .day:not([aria-disabled='true']):not(.is-pin):hover::after {
    opacity: 1;
    transform: none;
  }
}

.day:focus-visible {
  outline: none;
}

.day:focus-visible::after {
  opacity: 1;
  transform: none;
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.day.is-pin:focus-visible::after {
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
}

/* gone days and booked nights can't be chosen; a booked night has a hairline through it */
.day[aria-disabled='true'] {
  cursor: default;
}

.day[aria-disabled='true'] .day__num {
  color: var(--faint);
  font-weight: 380;
}

.day.is-booked .day__num::after {
  content: '';
  position: absolute;
  left: 1px;
  right: 1px;
  top: 52%;
  height: 1px;
  background: currentColor;
  transform: rotate(-38deg);
}

/* today: a short hairline under its number */
.day.is-today .day__num::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 10px;
  height: 1px;
  margin-left: -5px;
  background: currentColor;
}

/* ---------------------------------------------------------------- a phone */
@media (max-width: 719px) {
  :root {
    --cell-w: min(52px, calc((100vw - 32px) / 7));
    --cell-h: 48px;
  }

  .cal {
    grid-template-columns: auto;
    row-gap: 18px;
    padding: 0;
  }

  .cal__stay {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 1fr auto;
    column-gap: 20px;
    padding: 0 0 18px;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  .cal__label {
    grid-column: 1 / -1;
  }

  .cal__count {
    grid-row: 2 / 5;
    margin-top: 10px;
    min-width: 128px;
  }

  .cal__num {
    font-size: 108px;
  }

  .cal__unit {
    margin-top: 6px;
    font-size: 14px;
  }

  .cal__dates {
    grid-column: 2;
    grid-row: 2 / 4;
    align-self: end;
    gap: 8px;
    margin: 0;
    padding-top: 12px;
  }

  .cal__date {
    padding-bottom: 8px;
  }

  .cal__date dd {
    font-size: 14px;
  }

  .cal__clear {
    grid-column: 2;
    grid-row: 4;
    justify-self: start;
    margin: 6px 0 0 -10px;
  }
}