@zyncat/ui 0.11.0 → 0.13.0

package/src/components/composites/date-picker/date-picker.css

@@ -1,595 +1,599 @@
-/* date-picker domain - geometry + paint for DateField/DateTimeField (.dtp*), DateRangeField (.drp*), TimeField (.tfd*, .tsg*). */
+@layer zyncat.tokens, zyncat.components;
 
-.dtf__trigger {
-  display: flex;
-  align-items: center;
-  text-align: left;
-  cursor: pointer;
-  gap: var(--space-2);
-}
-.dtf__value {
-  font: var(--type-mono);
-  font-variant-numeric: tabular-nums;
-  color: var(--text-strong);
-}
-.dtf__placeholder {
-  color: var(--text-disabled);
-}
-.dtf__trigger:disabled .dtf__value {
-  color: var(--text-disabled);
-}
+@layer zyncat.components {
+  /* date-picker domain - geometry + paint for DateField/DateTimeField (.dtp*), DateRangeField (.drp*), TimeField (.tfd*, .tsg*). */
 
-/* Hover - subtle gray wash + stronger border, matching Select's trigger. The border
-   darkens via the shared .fld__input:hover; this adds the neutral wash it omits. Held
-   off while focused or open, where the accent focus look owns the trigger. */
-.dtf__trigger:hover:not(:disabled):not(:focus):not([aria-expanded='true']) {
-  background-color: var(--neutral-wash);
-}
+  .dtf__trigger {
+    display: flex;
+    align-items: center;
+    text-align: left;
+    cursor: pointer;
+    gap: var(--space-2);
+  }
+  .dtf__value {
+    font: var(--type-mono);
+    font-variant-numeric: tabular-nums;
+    color: var(--text-strong);
+  }
+  .dtf__placeholder {
+    color: var(--text-disabled);
+  }
+  .dtf__trigger:disabled .dtf__value {
+    color: var(--text-disabled);
+  }
 
-/* open - focus moves into the panel, so the trigger holds the focus look itself while expanded. */
-.dtf__trigger[aria-expanded='true']:not(:disabled) {
-  border-color: var(--accent);
-  background: var(--bg-surface);
-  box-shadow: var(--ring-accent);
-}
+  /* Hover - light fill + stronger border, matching Select's trigger. The border
+   darkens via the shared .fld__input:hover; this adds the fill it omits. Held
+   off while focused or open, where the accent focus look owns the trigger. */
+  .dtf__trigger:hover:not(:disabled):not(:focus):not([aria-expanded='true']) {
+    background-color: color-mix(in oklab, var(--bg-surface) 55%, var(--bg-muted));
+  }
 
-.dtp {
-  --dtp-cell: var(--control-height);
-  background: var(--bg-surface-raised);
-  border: var(--border-hairline) solid var(--border-default);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-lg);
-  overflow: hidden;
-}
+  /* open - focus moves into the panel, so the trigger holds the focus look itself while expanded. */
+  .dtf__trigger[aria-expanded='true']:not(:disabled) {
+    border-color: var(--accent);
+    background: var(--bg-surface);
+    box-shadow: var(--ring-accent);
+  }
 
-.dtp__cal {
-  padding: var(--space-3) var(--space-3) var(--space-2);
-}
+  .dtp {
+    --dtp-cell: var(--control-height);
+    background: var(--bg-surface-raised);
+    border: var(--border-hairline) solid var(--border-default);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    overflow: hidden;
+  }
 
-/* header - month flush-left (semibold sans), year as a quiet mono chip; carets + today-jump grouped right. */
-.dtp__head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-2);
-  margin-inline: calc(-1 * var(--space-3));
-  padding-inline: var(--space-3);
-  padding-bottom: var(--space-2);
-  border-bottom: var(--border-hairline) solid var(--border-subtle);
-  margin-bottom: var(--space-3);
-}
-.dtp__month {
-  padding-inline-start: var(--space-2); /* optical: toward the first numeral */
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-2);
-  font: var(--type-caption);
-  font-weight: var(--weight-semibold);
-  color: var(--text-strong);
-}
-.dtp__year {
-  font-family: var(--font-mono);
-  font-size: var(--size-micro);
-  line-height: 1;
-  font-weight: var(--weight-regular);
-  font-variant-numeric: tabular-nums;
-  color: var(--text-subtle);
-  background: var(--bg-muted);
-  padding: var(--space-1);
-  border-radius: var(--radius-sm);
-}
-.dtp__navs {
-  display: flex;
-  gap: var(--space-1);
-}
-.dtp__nav {
-  width: var(--control-height-sm);
-  height: var(--control-height-sm);
-  display: grid;
-  place-items: center;
-  border: 0;
-  background: transparent;
-  color: var(--text-muted);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: var(--transition-colors);
-}
-.dtp__nav:hover:not(:disabled) {
-  background: var(--neutral-wash);
-  color: var(--text-strong);
-}
-.dtp__nav:active:not(:disabled) {
-  background: var(--bg-muted);
-}
-.dtp__nav:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-.dtp__nav:disabled {
-  color: var(--text-disabled);
-  cursor: default;
-}
+  .dtp__cal {
+    padding: var(--space-3) var(--space-3) var(--space-2);
+  }
 
-.dtp__dow {
-  display: grid;
-  grid-template-columns: repeat(7, var(--dtp-cell));
-  gap: var(--space-1);
-  padding-bottom: var(--space-3);
-}
-.dtp__dow span {
-  font: var(--type-micro);
-  color: var(--text-subtle);
-  text-align: center;
-}
+  /* header - month flush-left (semibold sans), year as a quiet mono chip; carets + today-jump grouped right. */
+  .dtp__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+    margin-inline: calc(-1 * var(--space-3));
+    padding-inline: var(--space-3);
+    padding-bottom: var(--space-2);
+    border-bottom: var(--border-hairline) solid var(--border-subtle);
+    margin-bottom: var(--space-3);
+  }
+  .dtp__month {
+    padding-inline-start: var(--space-2); /* optical: toward the first numeral */
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    font: var(--type-caption);
+    font-weight: var(--weight-semibold);
+    color: var(--text-strong);
+  }
+  .dtp__year {
+    font-family: var(--font-mono);
+    font-size: var(--size-micro);
+    line-height: 1;
+    font-weight: var(--weight-regular);
+    font-variant-numeric: tabular-nums;
+    color: var(--text-subtle);
+    background: var(--bg-muted);
+    padding: var(--space-1);
+    border-radius: var(--radius-sm);
+  }
+  .dtp__navs {
+    display: flex;
+    gap: var(--space-1);
+  }
+  .dtp__nav {
+    width: var(--control-height-sm);
+    height: var(--control-height-sm);
+    display: grid;
+    place-items: center;
+    border: 0;
+    background: transparent;
+    color: var(--text-muted);
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    transition: var(--transition-colors);
+  }
+  .dtp__nav:hover:not(:disabled) {
+    background: var(--neutral-wash);
+    color: var(--text-strong);
+  }
+  .dtp__nav:active:not(:disabled) {
+    background: var(--bg-muted);
+  }
+  .dtp__nav:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+  }
+  .dtp__nav:disabled {
+    color: var(--text-disabled);
+    cursor: default;
+  }
 
-.dtp__days {
-  position: relative; /* containing block + measuring frame for the glide pill */
-  display: grid;
-  grid-template-columns: repeat(7, var(--dtp-cell));
-  gap: var(--space-1);
-  isolation: isolate; /* the hover pill's z:-1 must resolve here, above the panel bg, below cell content */
-}
-/* ARIA rows - no boxes; the buttons stay direct grid items */
-.dtp__row {
-  display: contents;
-}
+  .dtp__dow {
+    display: grid;
+    grid-template-columns: repeat(7, var(--dtp-cell));
+    gap: var(--space-1);
+    padding-bottom: var(--space-3);
+  }
+  .dtp__dow span {
+    font: var(--type-micro);
+    color: var(--text-subtle);
+    text-align: center;
+  }
 
-/* day cell - the button must create no stacking context, so the pill (z0) / numeral (z1) resolve at grid level. */
-.dtp__day {
-  position: relative;
-  width: var(--dtp-cell);
-  height: var(--dtp-cell);
-  display: grid;
-  place-items: center;
-  border: 0;
-  padding: 0;
-  background: transparent;
-  border-radius: var(--radius-md);
-  font-family: var(--font-mono);
-  font-size: var(--size-caption);
-  font-variant-numeric: tabular-nums;
-  color: var(--text-body);
-  cursor: pointer;
-  transition: var(--transition-colors);
-}
-.dtp__day:hover:not(:disabled) {
-  color: var(--text-strong);
-} /* background comes from the shared glide pill, not per-cell */
-.dtp__day:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-.dtp__day.is-out {
-  color: var(--text-subtle);
-}
-.dtp__day:disabled {
-  color: var(--text-disabled);
-  cursor: default;
-}
+  .dtp__days {
+    position: relative; /* containing block + measuring frame for the glide pill */
+    display: grid;
+    grid-template-columns: repeat(7, var(--dtp-cell));
+    gap: var(--space-1);
+    isolation: isolate; /* the hover pill's z:-1 must resolve here, above the panel bg, below cell content */
+  }
+  /* ARIA rows - no boxes; the buttons stay direct grid items */
+  .dtp__row {
+    display: contents;
+  }
 
-/* gliding hover pill (useGlide) - bg-muted (not -subtle, else ~ invisible on the raised surface); z:-1 under numerals + selection tint. */
-.dtp__hover {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: -1;
-  border-radius: var(--radius-md);
-  background: var(--neutral-wash);
-  will-change: transform, opacity;
-}
+  /* day cell - the button must create no stacking context, so the pill (z0) / numeral (z1) resolve at grid level. */
+  .dtp__day {
+    position: relative;
+    width: var(--dtp-cell);
+    height: var(--dtp-cell);
+    display: grid;
+    place-items: center;
+    border: 0;
+    padding: 0;
+    background: transparent;
+    border-radius: var(--radius-md);
+    font-family: var(--font-mono);
+    font-size: var(--size-caption);
+    font-variant-numeric: tabular-nums;
+    color: var(--text-body);
+    cursor: pointer;
+    transition: var(--transition-colors);
+  }
+  .dtp__day:hover:not(:disabled) {
+    color: var(--text-strong);
+  } /* background comes from the shared glide pill, not per-cell */
+  .dtp__day:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+  }
+  .dtp__day.is-out {
+    color: var(--text-subtle);
+  }
+  .dtp__day:disabled {
+    color: var(--text-disabled);
+    cursor: default;
+  }
 
-/* selection - a quiet tint, not a solid fill (so it never outshouts Done); the layoutId node, so fill + border travel together. */
-.dtp__pill {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  border-radius: var(--radius-md);
-  background: var(--accent-subtle);
-  border: var(--border-hairline) solid var(--accent-border);
-}
-.dtp__num {
-  position: relative;
-  z-index: 1;
-}
-.dtp__day.is-selected .dtp__num {
-  color: var(--text-accent);
-  font-weight: var(--weight-semibold);
-}
+  /* gliding hover pill (useGlide) - bg-muted (not -subtle, else ~ invisible on the raised surface); z:-1 under numerals + selection tint. */
+  .dtp__hover {
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    border-radius: var(--radius-md);
+    background: var(--neutral-wash);
+    will-change: transform, opacity;
+  }
 
-/* today - accent numeral + a short bar, never a fill (fill means "picked"); reads on the selection tint too. */
-.dtp__day.is-today .dtp__num {
-  color: var(--text-accent);
-  font-weight: var(--weight-semibold);
-}
-.dtp__dot {
-  position: absolute;
-  bottom: var(--space-1);
-  left: 50%;
-  width: var(--space-2);
-  height: calc(var(--space-px) * 2);
-  margin-left: calc(-1 * var(--space-1));
-  border-radius: var(--space-px);
-  background: var(--accent);
-  z-index: 1;
-}
-.dtp__day:disabled .dtp__num {
-  color: var(--text-disabled);
-}
-.dtp__day:disabled .dtp__dot {
-  background: var(--text-disabled);
-}
+  /* selection - a quiet tint, not a solid fill (so it never outshouts Done); the layoutId node, so fill + border travel together. */
+  .dtp__pill {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    border-radius: var(--radius-md);
+    background: var(--accent-subtle);
+    border: var(--border-hairline) solid var(--accent-border);
+  }
+  .dtp__num {
+    position: relative;
+    z-index: 1;
+  }
+  .dtp__day.is-selected .dtp__num {
+    color: var(--text-accent);
+    font-weight: var(--weight-semibold);
+  }
 
-/* time row - DateTimeField's slot, between the grid and the footer */
-.dtp__time {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-2) var(--space-3);
-  border-top: var(--border-hairline) solid var(--border-subtle);
-}
-.dtp__timeLabel {
-  font: var(--type-caption);
-  font-weight: var(--weight-medium);
-  color: var(--text-muted);
-  margin-right: auto;
-}
+  /* today - accent numeral + a short bar, never a fill (fill means "picked"); reads on the selection tint too. */
+  .dtp__day.is-today .dtp__num {
+    color: var(--text-accent);
+    font-weight: var(--weight-semibold);
+  }
+  .dtp__dot {
+    position: absolute;
+    bottom: var(--space-1);
+    left: 50%;
+    width: var(--space-2);
+    height: calc(var(--space-px) * 2);
+    margin-left: calc(-1 * var(--space-1));
+    border-radius: var(--space-px);
+    background: var(--accent);
+    z-index: 1;
+  }
+  .dtp__day:disabled .dtp__num {
+    color: var(--text-disabled);
+  }
+  .dtp__day:disabled .dtp__dot {
+    background: var(--text-disabled);
+  }
 
-/* keyboard hint - shown only on focus-within; asymmetric easing (eases in, leaves fast). */
-.dtp__timeHint {
-  display: inline-flex;
-  gap: var(--space-1);
-  opacity: 0;
-  transform: translateX(var(--space-1));
-  pointer-events: none;
-  transition:
-    opacity var(--duration-fast) var(--ease-exit),
-    transform var(--duration-fast) var(--ease-exit);
-}
-.dtp__time:focus-within .dtp__timeHint {
-  opacity: 1;
-  transform: none;
-  transition:
-    opacity var(--duration-base) var(--ease-entrance),
-    transform var(--duration-base) var(--ease-entrance);
-}
-.dtp__timeHint kbd {
-  font-family: var(--font-mono);
-  font-size: var(--size-micro);
-  line-height: 1;
-  color: var(--text-subtle);
-  background: var(--bg-subtle);
-  border: var(--border-hairline) solid var(--border-subtle);
-  border-radius: var(--radius-sm);
-  padding: var(--space-1);
-}
+  /* time row - DateTimeField's slot, between the grid and the footer */
+  .dtp__time {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    border-top: var(--border-hairline) solid var(--border-subtle);
+  }
+  .dtp__timeLabel {
+    font: var(--type-caption);
+    font-weight: var(--weight-medium);
+    color: var(--text-muted);
+    margin-right: auto;
+  }
 
-.dtp__foot {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  padding: var(--space-2) var(--space-3);
-  background: var(--bg-subtle);
-  border-top: var(--border-hairline) solid var(--border-subtle);
-}
-.dtp__tz {
-  font-family: var(--font-mono);
-  font-size: var(--size-caption);
-  font-variant-numeric: tabular-nums;
-  color: var(--text-subtle);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.dtp__footSpacer {
-  flex: 1 1 auto;
-}
+  /* keyboard hint - shown only on focus-within; asymmetric easing (eases in, leaves fast). */
+  .dtp__timeHint {
+    display: inline-flex;
+    gap: var(--space-1);
+    opacity: 0;
+    transform: translateX(var(--space-1));
+    pointer-events: none;
+    transition:
+      opacity var(--duration-fast) var(--ease-exit),
+      transform var(--duration-fast) var(--ease-exit);
+  }
+  .dtp__time:focus-within .dtp__timeHint {
+    opacity: 1;
+    transform: none;
+    transition:
+      opacity var(--duration-base) var(--ease-entrance),
+      transform var(--duration-base) var(--ease-entrance);
+  }
+  .dtp__timeHint kbd {
+    font-family: var(--font-mono);
+    font-size: var(--size-micro);
+    line-height: 1;
+    color: var(--text-subtle);
+    background: var(--bg-subtle);
+    border: var(--border-hairline) solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    padding: var(--space-1);
+  }
 
-.drp {
-  --dtp-cell: var(--control-height); /* the day grid reuses .dtp__days/.dtp__dow, which size columns off this var */
-  background: var(--bg-surface-raised);
-  border: var(--border-hairline) solid var(--border-default);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-lg);
-  overflow: hidden;
-}
-.drp__body {
-  display: flex;
-  align-items: stretch;
-}
+  .dtp__foot {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-2) var(--space-3);
+    background: var(--bg-subtle);
+    border-top: var(--border-hairline) solid var(--border-subtle);
+  }
+  .dtp__tz {
+    font-family: var(--font-mono);
+    font-size: var(--size-caption);
+    font-variant-numeric: tabular-nums;
+    color: var(--text-subtle);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .dtp__footSpacer {
+    flex: 1 1 auto;
+  }
 
-.drp__presets {
-  flex: none;
-  width: max-content; /* sized by the longest preset label - no magic width number */
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-px);
-  padding: var(--space-3) var(--space-2);
-  border-right: var(--border-hairline) solid var(--border-subtle);
-  background: var(--bg-subtle);
-  isolation: isolate; /* the glide pill's z:-1 resolves here */
-}
-.drp__preset {
-  position: relative;
-  appearance: none;
-  text-align: left;
-  border: 0;
-  background: transparent;
-  color: var(--text-body);
-  font: var(--type-caption);
-  padding: var(--space-2);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: var(--transition-colors);
-  white-space: nowrap;
-}
-.drp__preset:hover {
-  color: var(--text-strong);
-} /* bg comes from the glide pill */
-.drp__preset:focus-visible {
-  outline: none;
-  box-shadow: var(--ring-accent);
-}
-.drp__preset.is-active {
-  background: var(--accent-subtle);
-  color: var(--text-accent);
-  font-weight: var(--weight-medium);
-}
-/* gliding hover indicator - one pill that glides between presets (see glide-pill); the active tint is separate. */
-.drp__presetGlide {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: -1;
-  border-radius: var(--radius-md);
-  background: var(--neutral-wash);
-  will-change: transform, opacity;
-}
+  .drp {
+    --dtp-cell: var(--control-height); /* the day grid reuses .dtp__days/.dtp__dow, which size columns off this var */
+    background: var(--bg-surface-raised);
+    border: var(--border-hairline) solid var(--border-default);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    overflow: hidden;
+  }
+  .drp__body {
+    display: flex;
+    align-items: stretch;
+  }
 
-.drp__months {
-  position: relative; /* containing block + measuring frame for the glide pill spanning both grids */
-  isolation: isolate; /* contain the pill's z:-1 here, else it paints behind the panel surface */
-  display: flex;
-}
-.drp__months .dtp__cal {
-  padding: var(--space-3);
-}
-.drp__months .dtp__cal + .dtp__cal {
-  border-left: var(--border-hairline) solid var(--border-subtle);
-}
+  .drp__presets {
+    flex: none;
+    width: max-content; /* sized by the longest preset label - no magic width number */
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-px);
+    padding: var(--space-3) var(--space-2);
+    border-right: var(--border-hairline) solid var(--border-subtle);
+    background: var(--bg-subtle);
+    isolation: isolate; /* the glide pill's z:-1 resolves here */
+  }
+  .drp__preset {
+    position: relative;
+    appearance: none;
+    text-align: left;
+    border: 0;
+    background: transparent;
+    color: var(--text-body);
+    font: var(--type-caption);
+    padding: var(--space-2);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: var(--transition-colors);
+    white-space: nowrap;
+  }
+  .drp__preset:hover {
+    color: var(--text-strong);
+  } /* bg comes from the glide pill */
+  .drp__preset:focus-visible {
+    outline: none;
+    box-shadow: var(--ring-accent);
+  }
+  .drp__preset.is-active {
+    background: var(--accent-subtle);
+    color: var(--text-accent);
+    font-weight: var(--weight-medium);
+  }
+  /* gliding hover indicator - one pill that glides between presets (see glide-pill); the active tint is separate. */
+  .drp__presetGlide {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    border-radius: var(--radius-md);
+    background: var(--neutral-wash);
+    will-change: transform, opacity;
+  }
 
-/* directional month slide - CSS keyframe on the keyed grid remount (can't fight Motion's layoutId caps); gated on reduced-motion. */
-@media (prefers-reduced-motion: no-preference) {
-  .drp .dtp__days[data-enter='1'] {
-    animation: drp-month-in-l var(--duration-base) var(--ease-entrance);
+  .drp__months {
+    position: relative; /* containing block + measuring frame for the glide pill spanning both grids */
+    isolation: isolate; /* contain the pill's z:-1 here, else it paints behind the panel surface */
+    display: flex;
   }
-  .drp .dtp__days[data-enter='-1'] {
-    animation: drp-month-in-r var(--duration-base) var(--ease-entrance);
+  .drp__months .dtp__cal {
+    padding: var(--space-3);
   }
-}
-@keyframes drp-month-in-l {
-  from {
-    opacity: 0;
-    transform: translateX(16px);
+  .drp__months .dtp__cal + .dtp__cal {
+    border-left: var(--border-hairline) solid var(--border-subtle);
   }
-  to {
-    opacity: 1;
-    transform: none;
+
+  /* directional month slide - CSS keyframe on the keyed grid remount (can't fight Motion's layoutId caps); gated on reduced-motion. */
+  @media (prefers-reduced-motion: no-preference) {
+    .drp .dtp__days[data-enter='1'] {
+      animation: drp-month-in-l var(--duration-base) var(--ease-entrance);
+    }
+    .drp .dtp__days[data-enter='-1'] {
+      animation: drp-month-in-r var(--duration-base) var(--ease-entrance);
+    }
   }
-}
-@keyframes drp-month-in-r {
-  from {
-    opacity: 0;
-    transform: translateX(-16px);
+  @keyframes drp-month-in-l {
+    from {
+      opacity: 0;
+      transform: translateX(16px);
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
   }
-  to {
-    opacity: 1;
-    transform: none;
+  @keyframes drp-month-in-r {
+    from {
+      opacity: 0;
+      transform: translateX(-16px);
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
   }
-}
 
-/* month header - prev caret hugs the left edge, next caret the right; the label centers between. */
-.drp__mhead {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding-bottom: var(--space-3);
-  margin-bottom: var(--space-3);
-  border-bottom: var(--border-hairline) solid var(--border-subtle);
-  margin-inline: calc(-1 * var(--space-3));
-  padding-inline: var(--space-3);
-}
-.drp__mhead .dtp__month {
-  flex: 1 1 auto;
-  text-align: center;
-  padding-inline-start: 0;
-}
-.drp__mhead--right {
-  justify-content: space-between;
-}
+  /* month header - prev caret hugs the left edge, next caret the right; the label centers between. */
+  .drp__mhead {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding-bottom: var(--space-3);
+    margin-bottom: var(--space-3);
+    border-bottom: var(--border-hairline) solid var(--border-subtle);
+    margin-inline: calc(-1 * var(--space-3));
+    padding-inline: var(--space-3);
+  }
+  .drp__mhead .dtp__month {
+    flex: 1 1 auto;
+    text-align: center;
+    padding-inline-start: 0;
+  }
+  .drp__mhead--right {
+    justify-content: space-between;
+  }
 
-/* range band - extends 1px into the 4px gap toward an in-range neighbour (kills the subpixel seam), rounds where it stops. */
-.drp__band {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  background: var(
-    --accent-subtle
-  ); /* opaque, so the 1px gap-bridge overlaps don't stack into darker seams between days */
-}
-.drp__band--extL {
-  left: calc(-1 * var(--space-1) - 1px);
-}
-.drp__band--extR {
-  right: calc(-1 * var(--space-1) - 1px);
-}
-.drp__band--roundL {
-  border-top-left-radius: var(--radius-md);
-  border-bottom-left-radius: var(--radius-md);
-}
-.drp__band--roundR {
-  border-top-right-radius: var(--radius-md);
-  border-bottom-right-radius: var(--radius-md);
-}
+  /* range band - extends 1px into the 4px gap toward an in-range neighbour (kills the subpixel seam), rounds where it stops. */
+  .drp__band {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    background: var(
+      --accent-subtle
+    ); /* opaque, so the 1px gap-bridge overlaps don't stack into darker seams between days */
+  }
+  .drp__band--extL {
+    left: calc(-1 * var(--space-1) - 1px);
+  }
+  .drp__band--extR {
+    right: calc(-1 * var(--space-1) - 1px);
+  }
+  .drp__band--roundL {
+    border-top-left-radius: var(--radius-md);
+    border-bottom-left-radius: var(--radius-md);
+  }
+  .drp__band--roundR {
+    border-top-right-radius: var(--radius-md);
+    border-bottom-right-radius: var(--radius-md);
+  }
 
-/* endpoint cap - a Motion layoutId node that glides between cells; the ghost variant (outline, no fill) marks the tentative end. */
-.drp__cap {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  border-radius: var(--radius-md);
-  background: var(--accent-border); /* more opaque than the band - a clear selection marker, not a heavy solid fill */
-}
-.drp__cap--ghost {
-  background: transparent;
-  border: var(--border-hairline) solid var(--accent);
-}
+  /* endpoint cap - a Motion layoutId node that glides between cells; the ghost variant (outline, no fill) marks the tentative end. */
+  .drp__cap {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    border-radius: var(--radius-md);
+    background: var(--accent-border); /* more opaque than the band - a clear selection marker, not a heavy solid fill */
+  }
+  .drp__cap--ghost {
+    background: transparent;
+    border: var(--border-hairline) solid var(--accent);
+  }
 
-/* numerals ride above caps (z2); selection reads strong accent, in-range a touch quieter. */
-.drp .dtp__num {
-  z-index: 2;
-}
-.drp .dtp__day.is-in-range .dtp__num {
-  color: var(--text-accent);
-}
-.drp .dtp__day.is-cap .dtp__num,
-.drp .dtp__day.is-cap-ghost .dtp__num {
-  color: var(--text-accent);
-  font-weight: var(--weight-semibold);
-}
+  /* numerals ride above caps (z2); selection reads strong accent, in-range a touch quieter. */
+  .drp .dtp__num {
+    z-index: 2;
+  }
+  .drp .dtp__day.is-in-range .dtp__num {
+    color: var(--text-accent);
+  }
+  .drp .dtp__day.is-cap .dtp__num,
+  .drp .dtp__day.is-cap-ghost .dtp__num {
+    color: var(--text-accent);
+    font-weight: var(--weight-semibold);
+  }
 
-.drp .dtp__day.is-cap .dtp__dot,
-.drp .dtp__day.is-cap-ghost .dtp__dot {
-  background: var(--accent);
-}
+  .drp .dtp__day.is-cap .dtp__dot,
+  .drp .dtp__day.is-cap-ghost .dtp__dot {
+    background: var(--accent);
+  }
 
-.drp__foot {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  padding: var(--space-2) var(--space-3);
-  background: var(--bg-subtle);
-  border-top: var(--border-hairline) solid var(--border-subtle);
-}
-.drp__readout {
-  font-family: var(--font-mono);
-  font-size: var(--size-caption);
-  font-variant-numeric: tabular-nums;
-  color: var(--text-body);
-  white-space: nowrap;
-}
-.drp__readout .drp__count {
-  color: var(--text-subtle);
-}
-.drp__readout.is-empty {
-  color: var(--text-disabled);
-}
-.drp__tz {
-  font-family: var(--font-mono);
-  font-size: var(--size-caption);
-  font-variant-numeric: tabular-nums;
-  color: var(--text-subtle);
-  white-space: nowrap;
-}
-.drp__footSpacer {
-  flex: 1 1 auto;
-}
+  .drp__foot {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-2) var(--space-3);
+    background: var(--bg-subtle);
+    border-top: var(--border-hairline) solid var(--border-subtle);
+  }
+  .drp__readout {
+    font-family: var(--font-mono);
+    font-size: var(--size-caption);
+    font-variant-numeric: tabular-nums;
+    color: var(--text-body);
+    white-space: nowrap;
+  }
+  .drp__readout .drp__count {
+    color: var(--text-subtle);
+  }
+  .drp__readout.is-empty {
+    color: var(--text-disabled);
+  }
+  .drp__tz {
+    font-family: var(--font-mono);
+    font-size: var(--size-caption);
+    font-variant-numeric: tabular-nums;
+    color: var(--text-subtle);
+    white-space: nowrap;
+  }
+  .drp__footSpacer {
+    flex: 1 1 auto;
+  }
 
-/* bottom-sheet skin (mobile) - sheds border/shadow (the sheet supplies elevation), rounds only top corners, one month. */
-.drp--sheet {
-  --dtp-cell: var(--control-height-lg);
-} /* 40px touch targets */
-.drp--sheet {
-  width: 100vw;
-  max-width: 100%;
-  border: 0;
-  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
-  box-shadow: none;
-}
-.drp--sheet .drp__body {
-  flex-direction: column;
-}
-.drp--sheet .drp__presets {
-  width: auto;
-  flex-direction: row;
-  overflow-x: auto;
-  gap: var(--space-1);
-  border-right: 0;
-  border-bottom: var(--border-hairline) solid var(--border-subtle);
-  scrollbar-width: none;
-}
-.drp--sheet .drp__presets::-webkit-scrollbar {
-  display: none;
-}
-.drp--sheet .drp__preset {
-  flex: none;
-}
-.drp--sheet .drp__months {
-  justify-content: center;
-  padding-block: var(--space-2);
-}
+  /* bottom-sheet skin (mobile) - sheds border/shadow (the sheet supplies elevation), rounds only top corners, one month. */
+  .drp--sheet {
+    --dtp-cell: var(--control-height-lg);
+  } /* 40px touch targets */
+  .drp--sheet {
+    width: 100vw;
+    max-width: 100%;
+    border: 0;
+    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+    box-shadow: none;
+  }
+  .drp--sheet .drp__body {
+    flex-direction: column;
+  }
+  .drp--sheet .drp__presets {
+    width: auto;
+    flex-direction: row;
+    overflow-x: auto;
+    gap: var(--space-1);
+    border-right: 0;
+    border-bottom: var(--border-hairline) solid var(--border-subtle);
+    scrollbar-width: none;
+  }
+  .drp--sheet .drp__presets::-webkit-scrollbar {
+    display: none;
+  }
+  .drp--sheet .drp__preset {
+    flex: none;
+  }
+  .drp--sheet .drp__months {
+    justify-content: center;
+    padding-block: var(--space-2);
+  }
 
-.tsg {
-  display: inline-flex;
-  align-items: center;
-  font-family: var(--font-mono);
-  font-size: var(--size-caption);
-  font-variant-numeric: tabular-nums;
-  color: var(--text-strong);
-}
-.tsg__seg {
-  padding: var(--space-1);
-  border-radius: var(--radius-sm);
-  outline: none;
-  cursor: text;
-  user-select: none;
-  transition: var(--transition-colors);
-}
-/* :focus, not :focus-visible, on purpose - a clicked segment reads selected like keyboard entry. */
-.tsg__seg:focus {
-  background: var(--accent-subtle);
-  color: var(--text-accent);
-}
-.tsg__seg.is-empty {
-  color: var(--text-disabled);
-}
-.tsg__seg.is-empty:focus {
-  color: var(--text-accent);
-}
-.tsg__sep {
-  color: var(--text-subtle);
-}
-.tsg__seg--mer {
-  margin-left: var(--space-1);
-}
+  .tsg {
+    display: inline-flex;
+    align-items: center;
+    font-family: var(--font-mono);
+    font-size: var(--size-caption);
+    font-variant-numeric: tabular-nums;
+    color: var(--text-strong);
+  }
+  .tsg__seg {
+    padding: var(--space-1);
+    border-radius: var(--radius-sm);
+    outline: none;
+    cursor: text;
+    user-select: none;
+    transition: var(--transition-colors);
+  }
+  /* :focus, not :focus-visible, on purpose - a clicked segment reads selected like keyboard entry. */
+  .tsg__seg:focus {
+    background: var(--accent-subtle);
+    color: var(--text-accent);
+  }
+  .tsg__seg.is-empty {
+    color: var(--text-disabled);
+  }
+  .tsg__seg.is-empty:focus {
+    color: var(--text-accent);
+  }
+  .tsg__sep {
+    color: var(--text-subtle);
+  }
+  .tsg__seg--mer {
+    margin-left: var(--space-1);
+  }
 
-.tsg.is-disabled,
-.tsg.is-disabled .tsg__seg {
-  color: var(--text-disabled);
-  cursor: not-allowed;
-}
+  .tsg.is-disabled,
+  .tsg.is-disabled .tsg__seg {
+    color: var(--text-disabled);
+    cursor: not-allowed;
+  }
 
-/* .tfd__box is a DIV wearing .fld__input chrome, so input's :focus can't reach it - re-stated as :focus-within, scoped under .tfd to win the cascade. */
-.tfd__box {
-  display: inline-flex;
-  align-items: center;
-  cursor: text;
-}
-.tfd .tfd__box:focus-within {
-  border-color: var(--accent);
-  background: var(--bg-surface);
-  box-shadow: var(--ring-accent);
-}
-.tfd.is-error .tfd__box {
-  border-color: var(--danger);
-}
-.tfd.is-error .tfd__box:hover:not(.is-disabled):not(:focus-within) {
-  border-color: var(--danger-text);
-}
-.tfd.is-error .tfd__box:focus-within {
-  box-shadow: var(--ring-danger);
-}
-.tfd .tfd__box.is-disabled {
-  background: var(--bg-muted);
-  cursor: not-allowed;
+  /* .tfd__box is a DIV wearing .fld__input chrome, so input's :focus can't reach it - re-stated as :focus-within, scoped under .tfd to win the cascade. */
+  .tfd__box {
+    display: inline-flex;
+    align-items: center;
+    cursor: text;
+  }
+  .tfd .tfd__box:focus-within {
+    border-color: var(--accent);
+    background: var(--bg-surface);
+    box-shadow: var(--ring-accent);
+  }
+  .tfd.is-error .tfd__box {
+    border-color: var(--danger);
+  }
+  .tfd.is-error .tfd__box:hover:not(.is-disabled):not(:focus-within) {
+    border-color: var(--danger-text);
+  }
+  .tfd.is-error .tfd__box:focus-within {
+    box-shadow: var(--ring-danger);
+  }
+  .tfd .tfd__box.is-disabled {
+    background: var(--bg-muted);
+    cursor: not-allowed;
+  }
 }