@scope (calendar-picker-ui) {
  :where(:scope) {
    /* ── Tokens ── */

    /* Host / label */
    --calendar-picker-gap-default:                    var(--a-space-2);
    --calendar-picker-font-size-default:              var(--a-ui-size);
    --calendar-picker-label-size-default:             var(--a-label-size);
    --calendar-picker-label-fg-default:               var(--a-label-color);
    --calendar-picker-label-fg-focus-default:         var(--a-fg-subtle);

    /* Trigger */
    --calendar-picker-trigger-height-default:         var(--a-size);
    --calendar-picker-trigger-px-default:             var(--a-ui-px);
    --calendar-picker-trigger-gap-default:            var(--a-space-1);
    --calendar-picker-trigger-radius-default:         var(--a-radius);
    --calendar-picker-trigger-bg-default:             var(--a-ui-bg);
    --calendar-picker-trigger-bg-hover-default:       var(--a-ui-bg-hover);
    --calendar-picker-trigger-fg-default:             var(--a-ui-text-subtle);
    --calendar-picker-trigger-border-default:         var(--a-ui-border);
    --calendar-picker-trigger-border-hover-default:   var(--a-ui-border-hover);
    --calendar-picker-trigger-focus-ring-default:     var(--a-focus-ring);
    --calendar-picker-trigger-focus-ring-invalid-default: var(--a-focus-ring-invalid);
    --calendar-picker-trigger-placeholder-fg-default: var(--a-ui-text-placeholder);
    --calendar-picker-trigger-fg-disabled-default:    var(--a-ui-text-disabled);

    /* Popover */
    --calendar-picker-popover-bg-default:             var(--a-bg-subtle);
    --calendar-picker-popover-border-default:         var(--a-border-subtle);
    --calendar-picker-popover-radius-default:         var(--a-radius-lg);
    --calendar-picker-popover-shadow-default:         var(--a-shadow-lg);
    --calendar-picker-popover-padding-default:        var(--a-space-2);
    --calendar-picker-popover-width-default:          16rem;
    --calendar-picker-popover-fg-default:             var(--a-fg);

    /* Header */
    --calendar-picker-header-gap-default:             var(--a-space-1);
    --calendar-picker-header-mb-default:              var(--a-space-2);
    --calendar-picker-title-fg-default:               var(--a-fg);
    --calendar-picker-title-size-default:             var(--a-ui-size);
    --calendar-picker-title-weight-default:           var(--a-weight-medium);

    /* Nav buttons (prev/next) */
    --calendar-picker-nav-size-default:               1.5rem;
    --calendar-picker-nav-radius-default:             var(--a-radius-sm);
    --calendar-picker-nav-bg-default:                 transparent;
    --calendar-picker-nav-bg-hover-default:           var(--a-bg-muted);
    --calendar-picker-nav-fg-default:                 var(--a-fg-muted);
    --calendar-picker-nav-fg-hover-default:           var(--a-fg);
    --calendar-picker-nav-icon-size-default:          0.75rem;

    /* Weekday header */
    --calendar-picker-weekday-fg-default:             var(--a-fg-muted);
    --calendar-picker-weekday-size-default:           var(--a-ui-sm);
    --calendar-picker-weekday-weight-default:         var(--a-weight-medium);
    --calendar-picker-weekday-height-default:         1.5rem;
    --calendar-picker-weekday-mb-default:             var(--a-space-1);

    /* Day cells */
    --calendar-picker-day-size-default:               2rem;
    --calendar-picker-day-radius-default:             var(--a-radius);
    --calendar-picker-day-font-size-default:          var(--a-ui-sm);
    --calendar-picker-day-bg-default:                 transparent;
    --calendar-picker-day-fg-default:                 var(--a-fg-subtle);
    --calendar-picker-day-bg-hover-default:           var(--a-bg-hover);
    --calendar-picker-day-fg-hover-default:           var(--a-fg);
    --calendar-picker-day-bg-selected-hover-default:  var(--a-accent-bg-hover);
    --calendar-picker-day-bg-selected-default:        var(--a-accent);
    --calendar-picker-day-fg-selected-default:        var(--a-accent-fg);
    --calendar-picker-day-fg-outside-default:         var(--a-fg-muted);
    --calendar-picker-day-fg-disabled-default:        var(--a-ui-text-disabled);
    --calendar-picker-day-today-border-default:       var(--a-accent);
    --calendar-picker-day-today-dot-size-default:     var(--a-space-0-5);
    --calendar-picker-day-today-dot-offset-default:   var(--a-space-1);
    --calendar-picker-day-grid-gap-default:           var(--a-space-px); /* 1px hairline between cells */
    --calendar-picker-day-focus-ring-default:         var(--a-focus-ring);

    /* Transitions */
    --calendar-picker-duration-default:               var(--a-duration-fast);
    --calendar-picker-easing-default:                 var(--a-easing);

    /* Typography */
    --calendar-picker-selected-weight-default:        var(--a-weight-medium);
    --calendar-picker-today-weight-default:           var(--a-weight-medium);
  }

  :scope {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--calendar-picker-gap, var(--calendar-picker-gap-default));
    min-width: 0;
    font-size: var(--calendar-picker-font-size, var(--calendar-picker-font-size-default));
  }

  /* ── State: disabled ── */
  :scope[disabled] {
    pointer-events: none;
    color: var(--calendar-picker-trigger-fg-disabled, var(--calendar-picker-trigger-fg-disabled-default));
  }

  /* ── Label (via ::before) ── */
  :scope::before {
    content: attr(label);
    font-size: var(--calendar-picker-label-size, var(--calendar-picker-label-size-default));
    color: var(--calendar-picker-label-fg, var(--calendar-picker-label-fg-default));
  }
  :scope:not([label])::before,
  :scope[label=""]::before {
    display: none;
  }
  :scope:focus-visible::before {
    color: var(--calendar-picker-label-fg-focus, var(--calendar-picker-label-fg-focus-default));
  }

  /* ── Trigger ── */
  [slot="trigger"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--calendar-picker-trigger-gap, var(--calendar-picker-trigger-gap-default));
    min-width: 0;
    min-height: var(--calendar-picker-trigger-height, var(--calendar-picker-trigger-height-default));
    padding: 0 var(--calendar-picker-trigger-px, var(--calendar-picker-trigger-px-default));
    border: 1px solid var(--calendar-picker-trigger-border, var(--calendar-picker-trigger-border-default));
    border-radius: var(--calendar-picker-trigger-radius, var(--calendar-picker-trigger-radius-default));
    background: var(--calendar-picker-trigger-bg, var(--calendar-picker-trigger-bg-default));
    color: var(--calendar-picker-trigger-fg, var(--calendar-picker-trigger-fg-default));
    line-height: 1;
    cursor: pointer;
    transition:
      border-color var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default)),
      background   var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default));
  }
  [slot="trigger"]:hover {
    border-color: var(--calendar-picker-trigger-border-hover, var(--calendar-picker-trigger-border-hover-default));
    background: var(--calendar-picker-trigger-bg-hover, var(--calendar-picker-trigger-bg-hover-default));
  }

  :scope:focus-visible { outline: none; }
  :scope:focus-visible [slot="trigger"] {
    /* Canonical ring via L3 token (see semantics.css FOCUS block). */
    box-shadow: var(--calendar-picker-trigger-focus-ring, var(--calendar-picker-trigger-focus-ring-default));
  }
  :scope[aria-invalid="true"]:focus-visible [slot="trigger"],
  :scope[error]:focus-visible [slot="trigger"] {
    box-shadow: var(--calendar-picker-trigger-focus-ring-invalid, var(--calendar-picker-trigger-focus-ring-invalid-default));
  }

  [slot="display"] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--calendar-picker-trigger-fg, var(--calendar-picker-trigger-fg-default));
  }
  :scope:not([value]) [slot="display"],
  :scope[value=""] [slot="display"] {
    color: var(--calendar-picker-trigger-placeholder-fg, var(--calendar-picker-trigger-placeholder-fg-default));
  }

  [slot="caret"] {
    flex-shrink: 0;
    --a-icon-size: var(--calendar-picker-font-size, var(--calendar-picker-font-size-default));
  }
}

/* ── Calendar popover (outside @scope — popover lives in top layer) ── */
/* Custom properties inherit from the host, so --calendar-picker-* tokens are available here. */

calendar-picker-ui [slot="popover"] {
  margin: 0;
  padding: var(--calendar-picker-popover-padding, var(--calendar-picker-popover-padding-default));
  border: 1px solid var(--calendar-picker-popover-border, var(--calendar-picker-popover-border-default));
  border-radius: var(--calendar-picker-popover-radius, var(--calendar-picker-popover-radius-default));
  background: var(--calendar-picker-popover-bg, var(--calendar-picker-popover-bg-default));
  box-shadow: var(--calendar-picker-popover-shadow, var(--calendar-picker-popover-shadow-default));
  width: var(--calendar-picker-popover-width, var(--calendar-picker-popover-width-default));
  font-family: inherit;
  font-size: var(--calendar-picker-font-size, var(--calendar-picker-font-size-default));
  color: var(--calendar-picker-popover-fg, var(--calendar-picker-popover-fg-default));
  /* Fade + lift in on first paint via @starting-style. Same pattern
     as menu/select/popover surfaces — see journal 2026-04-29 §18. */
  opacity: 1;
  translate: 0 0;
  transition: opacity var(--a-duration-fast) var(--a-easing-out),
              translate var(--a-duration-fast) var(--a-easing-out);
}

calendar-picker-ui [slot="popover"]:popover-open {
  @starting-style {
    opacity: 0;
    translate: 0 -4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  calendar-picker-ui [slot="popover"] { transition: none; }
}

/* Header row */
calendar-picker-ui [data-cal-header] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--calendar-picker-header-gap, var(--calendar-picker-header-gap-default));
  margin-block-end: var(--calendar-picker-header-mb, var(--calendar-picker-header-mb-default));
}

calendar-picker-ui [data-cal-title] {
  flex: 1;
  text-align: center;
  font-size: var(--calendar-picker-title-size, var(--calendar-picker-title-size-default));
  font-weight: var(--calendar-picker-title-weight, var(--calendar-picker-title-weight-default));
  color: var(--calendar-picker-title-fg, var(--calendar-picker-title-fg-default));
}

calendar-picker-ui [data-cal-prev],
calendar-picker-ui [data-cal-next] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--calendar-picker-nav-size, var(--calendar-picker-nav-size-default));
  height: var(--calendar-picker-nav-size, var(--calendar-picker-nav-size-default));
  padding: 0;
  border: none;
  border-radius: var(--calendar-picker-nav-radius, var(--calendar-picker-nav-radius-default));
  background: var(--calendar-picker-nav-bg, var(--calendar-picker-nav-bg-default));
  color: var(--calendar-picker-nav-fg, var(--calendar-picker-nav-fg-default));
  cursor: pointer;
  transition:
    background var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default)),
    color var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default));
  --a-icon-size: var(--calendar-picker-nav-icon-size, var(--calendar-picker-nav-icon-size-default));
}
calendar-picker-ui [data-cal-prev]:hover,
calendar-picker-ui [data-cal-next]:hover {
  background: var(--calendar-picker-nav-bg-hover, var(--calendar-picker-nav-bg-hover-default));
  color: var(--calendar-picker-nav-fg-hover, var(--calendar-picker-nav-fg-hover-default));
}

/* Day-of-week header */
calendar-picker-ui [data-cal-weekdays] {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: var(--calendar-picker-weekday-size, var(--calendar-picker-weekday-size-default));
  font-weight: var(--calendar-picker-weekday-weight, var(--calendar-picker-weekday-weight-default));
  color: var(--calendar-picker-weekday-fg, var(--calendar-picker-weekday-fg-default));
  margin-block-end: var(--calendar-picker-weekday-mb, var(--calendar-picker-weekday-mb-default));
}

calendar-picker-ui [data-cal-weekdays] span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--calendar-picker-weekday-height, var(--calendar-picker-weekday-height-default));
}

/* Day grid */
calendar-picker-ui [data-cal-grid] {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--calendar-picker-day-grid-gap, var(--calendar-picker-day-grid-gap-default));
}

/* Day buttons */
calendar-picker-ui [data-cal-day] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--calendar-picker-day-size, var(--calendar-picker-day-size-default));
  height: var(--calendar-picker-day-size, var(--calendar-picker-day-size-default));
  margin: 0 auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--calendar-picker-day-radius, var(--calendar-picker-day-radius-default));
  background: var(--calendar-picker-day-bg, var(--calendar-picker-day-bg-default));
  color: var(--calendar-picker-day-fg, var(--calendar-picker-day-fg-default));
  font: inherit;
  font-size: var(--calendar-picker-day-font-size, var(--calendar-picker-day-font-size-default));
  cursor: pointer;
  transition:
    background var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default)),
    color var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default)),
    border-color var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default));
}

/* ── State: hover ── */
calendar-picker-ui [data-cal-day]:not([disabled]):not([data-outside]):hover {
  background: var(--calendar-picker-day-bg-hover, var(--calendar-picker-day-bg-hover-default));
  color: var(--calendar-picker-day-fg-hover, var(--calendar-picker-day-fg-hover-default));
}

/* ── State: focus ── */
calendar-picker-ui [data-cal-day]:not([disabled]):not([data-outside]):focus-visible,
calendar-picker-ui [data-cal-day][data-focused] {
  outline: none;
  box-shadow: var(--calendar-picker-day-focus-ring, var(--calendar-picker-day-focus-ring-default));
}

/* ── State: selected ── */
calendar-picker-ui [data-cal-day][data-selected] {
  background: var(--calendar-picker-day-bg-selected, var(--calendar-picker-day-bg-selected-default));
  color: var(--calendar-picker-day-fg-selected, var(--calendar-picker-day-fg-selected-default));
  font-weight: var(--calendar-picker-selected-weight, var(--calendar-picker-selected-weight-default));
}
calendar-picker-ui [data-cal-day][data-selected]:not([disabled]):hover {
  background: var(--calendar-picker-day-bg-selected-hover, var(--calendar-picker-day-bg-selected-hover-default));
  color: var(--calendar-picker-day-fg-selected, var(--calendar-picker-day-fg-selected-default));
}

/* ── State: today (unselected) ──
   Use a small bottom dot so it does not compete with the rounded
   focus-ring box-shadow (that looked like a double outline). */
calendar-picker-ui [data-cal-day][data-today]:not([data-selected]) {
  position: relative;
  color: var(--calendar-picker-day-today-border, var(--calendar-picker-day-today-border-default));
  font-weight: var(--calendar-picker-today-weight, var(--calendar-picker-today-weight-default));
}
calendar-picker-ui [data-cal-day][data-today]:not([data-selected])::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: var(--calendar-picker-day-today-dot-offset, var(--calendar-picker-day-today-dot-offset-default));
  width: var(--calendar-picker-day-today-dot-size, var(--calendar-picker-day-today-dot-size-default));
  height: var(--calendar-picker-day-today-dot-size, var(--calendar-picker-day-today-dot-size-default));
  border-radius: 50%;
  background: var(--calendar-picker-day-today-border, var(--calendar-picker-day-today-border-default));
  transform: translateX(-50%);
  pointer-events: none;
}

/* ── State: outside month ── */
calendar-picker-ui [data-cal-day][data-outside] {
  color: var(--calendar-picker-day-fg-outside, var(--calendar-picker-day-fg-outside-default));
  cursor: default;
}

/* ── State: disabled ── */
calendar-picker-ui [data-cal-day]:disabled:not([data-outside]) {
  color: var(--calendar-picker-day-fg-disabled, var(--calendar-picker-day-fg-disabled-default));
  cursor: not-allowed;
}
