/* The unfolding calendar: a minimal date picker. At rest a single week; the month unfolds out of it row after row,
   like a sheet folded in a concertina, and folds back into the week of the day you choose. One accent: the disc
   under the chosen day. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #141414;           /* the title, the big weekday */
  --soft: #6b6b6b;          /* a day */
  --faint: #c9c9c9;         /* a gone day, a day of the months either side */
  --rule: #e8e8e8;          /* the hairlines */
  --accent: #2b45f5;        /* the disc of the chosen day, and today */
  --cell: 52px;             /* a day, across */
  --row: 50px;              /* a week, down */
}

* {
  box-sizing: border-box;
}

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

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Roboto Flex 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 */
.wk {
  width: calc(var(--cell) * 7);
  user-select: none;
  -webkit-user-select: none;
}

.wk__head {
  display: flex;
  align-items: center;
  height: 40px;
  margin-bottom: 8px;
}

/* the month: on a change it narrows on the width axis, and the new one widens back (the script tweens --tw) */
.wk__title {
  --tw: 100;
  flex: 1;
  margin: 0;
  padding-left: 12px;
  overflow: hidden;
  font-size: 16px;
  font-weight: 620;
  font-variation-settings: 'wdth' var(--tw), 'opsz' 18;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.wk__title span {
  display: inline-block;
}

.wk__ctrl {
  display: flex;
  gap: 2px;
}

.wk__nav,
.wk__toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  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, background-color 0.2s ease;
}

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

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

/* the toggle: a hairline ring around its chevron, which the script turns with the fold */
.wk__toggle {
  margin-left: 4px;
  box-shadow: inset 0 0 0 1px var(--rule);
  transition: box-shadow 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .wk__nav[data-prev]:not(:disabled):hover svg {
    translate: -2px 0;
  }

  .wk__nav[data-next]:not(:disabled):hover svg {
    translate: 2px 0;
  }

  .wk__toggle:hover {
    box-shadow: inset 0 0 0 1px var(--ink);
  }

  .wk:not(.is-open) .wk__toggle:hover svg {
    translate: 0 2px;
  }

  .wk.is-open .wk__toggle:hover svg {
    translate: 0 -2px;
  }
}

.wk__toggle:active {
  box-shadow: inset 0 0 0 1px var(--ink);
}

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

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

.wk__week span {
  font-size: 10.5px;
  font-weight: 560;
  font-variation-settings: 'wdth' 112, 'opsz' 10;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--faint);
}

/* ---------------------------------------------------------------- the weeks */
.wk__body {
  position: relative;
  touch-action: none;
}

.wk__rows {
  position: relative;
  z-index: 1;
}

/* a week: its height is how much of it is unfolded (the script writes it while the sheet moves) */
.wk__row {
  position: relative;
  height: var(--row);
}

/* the face of a week: it turns on the edge that joins it to the week of the chosen day, like a fold in a sheet */
.wk__face {
  --fold: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--row);
  display: grid;
  grid-template-columns: repeat(7, var(--cell));
  transform-origin: 50% 0;
  backface-visibility: hidden;
  perspective: 420px;
}

.wk__row.is-above .wk__face {
  top: auto;
  bottom: 0;
  transform-origin: 50% 100%;
}

/* while a week turns, its crease shows as a hairline and its face takes a little shadow */
.wk__face::before,
.wk__face::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.wk__face::before {
  left: 8px;
  right: 8px;
  top: 0;
  height: 1px;
  background: var(--ink);
  opacity: calc(var(--fold) * 0.55);
}

.wk__row.is-above .wk__face::before {
  top: auto;
  bottom: 0;
}

.wk__face::after {
  inset: 0;
  border-radius: 6px;
  background: var(--ink);
  opacity: calc(var(--fold) * 0.07);
}

/* a week turning over (the old week, while it leaves) */
.wk__ghost {
  z-index: 2;
  pointer-events: none;
}

.wk__ghost::before,
.wk__ghost::after {
  display: none;
}

/* the disc of the chosen day: under the numbers, moved by the script */
.wk__disc {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  will-change: transform;
}

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

.day__num {
  position: relative;
  z-index: 1;
  font-size: 15px;
  line-height: 1;
  font-weight: 420;
  font-variation-settings: 'wdth' 100, 'opsz' 16;
  font-variant-numeric: tabular-nums;
  transition: color 0.06s linear, font-weight 0.3s cubic-bezier(0.34, 1.6, 0.5, 1);
}

/* a ring under the pointer, and under the keyboard's focus */
.day::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  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) {
  .day:not([aria-disabled='true']):not([aria-pressed='true']):hover::after {
    opacity: 1;
    transform: none;
  }
}

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

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

/* the days of the months either side, and the gone days */
.day.is-out .day__num {
  color: var(--faint);
}

.day[aria-disabled='true'] {
  cursor: default;
}

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

/* today: its number in the accent */
.day.is-today .day__num {
  color: var(--accent);
  font-weight: 600;
}

/* the number the disc is on turns white and takes weight (the script finds it as the disc moves) */
.day.is-under .day__num {
  color: #fff;
  font-weight: 680;
}

/* ---------------------------------------------------------------- the handle */
.wk__grab {
  display: grid;
  place-items: center;
  height: 22px;
  margin-top: 2px;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.wk__grab span {
  display: block;
  width: 28px;
  height: 2px;
  border-radius: 1px;
  background: var(--faint);
  transition: width 0.35s cubic-bezier(0.34, 1.6, 0.5, 1), background-color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .wk__grab:hover span {
    width: 40px;
    background: var(--ink);
  }
}

.wk.is-dragging .wk__grab span {
  width: 40px;
  background: var(--ink);
}

.wk.is-dragging,
.wk.is-dragging * {
  cursor: grabbing;
}

/* ---------------------------------------------------------------- the chosen day, written out */
.wk__foot {
  padding: 16px 12px 0;
  border-top: 1px solid var(--rule);
}

/* the weekday: each letter narrows away and the new ones widen in (the script tweens --w and --g) */
.wk__day {
  position: relative;
  height: 46px;
  margin: 0;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.wk__word {
  display: inline-block;
}

.wk__word.is-gone {
  position: absolute;
  left: 0;
  top: 0;
}

.wk__ch {
  --w: 100;
  --g: 330;
  display: inline-block;
  font-weight: var(--g);
  font-variation-settings: 'wdth' var(--w), 'opsz' 144;
}

.wk__date {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 10px 0 0;
  font-size: 13.5px;
  font-variation-settings: 'wdth' 100, 'opsz' 14;
  white-space: nowrap;
}

.wk__full {
  display: inline-block;
  font-weight: 560;
  color: var(--ink);
}

.wk__rel {
  display: inline-block;
  font-weight: 430;
  color: var(--soft);
}

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

  .wk__day {
    height: 42px;
    font-size: 42px;
  }
}