/* One date scroller, after the reel: a ruler of days under a fixed needle, a rolling number above */
.dw {
  --dw-bg: #24365f; --dw-ink: #fff3de; --dw-soft: rgba(255, 243, 222, .62); --dw-accent: #ccaa64;
  background: var(--dw-bg); color: var(--dw-ink);
  border-radius: 22px; padding: 22px 0 18px; display: grid; gap: 4px;
  user-select: none; -webkit-user-select: none;
}
.dw-q { text-align: center; font: 500 15px var(--sans); color: var(--dw-soft); letter-spacing: .02em; }

/* the readout: weekday, big rolling day number, month and year */
.dw-read { display: grid; justify-items: center; gap: 2px; padding: 6px 0 4px; }
.dw-wd { font: 500 13px var(--sans); text-transform: uppercase; letter-spacing: .16em; color: var(--dw-accent); height: 16px; }
.dw-num { display: flex; justify-content: center; height: 84px; overflow: hidden; font: 500 72px/84px var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.dw-digit { display: flex; flex-direction: column; width: .52em; overflow: visible; transition: transform .28s cubic-bezier(.22, 1, .36, 1), filter .28s, width .28s cubic-bezier(.22, 1, .36, 1); }
.dw-digit.gone { width: 0; }
.dw-digit span { height: 84px; width: .52em; text-align: center; }
.dw.fast .dw-digit { filter: blur(1.6px); }
.dw-my { font: italic 400 21px var(--serif); color: var(--dw-soft); height: 26px; }
.dw.unset .dw-read { opacity: .35; }

/* the ruler */
.dw-ruler { position: relative; height: 74px; cursor: grab; touch-action: pan-y; outline: none; }
.dw-ruler:active { cursor: grabbing; }
.dw-ruler canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dw-needle { position: absolute; left: 50%; top: 4px; bottom: 22px; width: 2px; margin-left: -1px; background: var(--dw-accent); border-radius: 2px; pointer-events: none; }
.dw-needle::before { content: ""; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--dw-accent); }
.dw-ruler:hover .dw-needle, .dw-ruler:focus-visible .dw-needle { box-shadow: 0 0 10px 1px rgba(204, 170, 100, .55); }
.dw-ruler:focus-visible { box-shadow: inset 0 0 0 2px rgba(204, 170, 100, .5); border-radius: 12px; }

.dw-foot { display: flex; justify-content: center; gap: 8px; padding-top: 8px; }
.dw-foot button {
  border: 0; border-radius: 999px; min-height: 38px; padding: 0 16px; cursor: pointer;
  background: rgba(255, 243, 222, .1); color: var(--dw-ink); font: 400 14px var(--sans);
  transition: background-color .2s;
}
.dw-foot button:hover { background: rgba(255, 243, 222, .18); }
.dw-foot button[aria-pressed="true"] { background: var(--dw-accent); color: #24365f; }
.dw.off .dw-ruler { opacity: .3; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .dw-digit { transition: none; }
  .dw.fast .dw-digit { filter: none; }
}