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

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

    /* Trigger */
    --calendar-picker-trigger-height:         var(--a-size);
    --calendar-picker-trigger-px:             var(--a-ui-px);
    --calendar-picker-trigger-gap:            var(--a-space-1);
    --calendar-picker-trigger-radius:         var(--a-radius);
    --calendar-picker-trigger-bg:             var(--a-ui-bg);
    --calendar-picker-trigger-bg-hover:       var(--a-ui-bg-hover);
    /* Committed value reads at full text strength (matches input-ui / select-ui
       value color); the placeholder state drops to -placeholder below via the
       :not([value]) override. Was -subtle, which muted the committed date. (bug-15/16) */
    --calendar-picker-trigger-fg:             var(--a-ui-text);
    --calendar-picker-trigger-border:         var(--a-ui-border);
    --calendar-picker-trigger-border-hover:   var(--a-ui-border-hover);
    --calendar-picker-trigger-focus-ring:     var(--a-focus-ring);
    --calendar-picker-trigger-focus-ring-invalid: var(--a-focus-ring-invalid);
    --calendar-picker-trigger-placeholder-fg: var(--a-ui-text-placeholder);
    --calendar-picker-trigger-fg-disabled:    var(--a-ui-text-disabled);

    /* Popover */
    --calendar-picker-popover-bg:             var(--a-bg-subtle);
    --calendar-picker-popover-border:         var(--a-border-subtle);
    --calendar-picker-popover-radius:         var(--a-radius-lg);
    --calendar-picker-popover-shadow:         var(--a-shadow-lg);
    --calendar-picker-popover-padding:        var(--a-space-2);
    /* Width derives from the day-grid so the popover scales with [size]:
       7 columns at --a-size + inter-cell breathing + popover padding both
       sides (border-box). Matches calendar-grid-ui's width formula. */
    --calendar-picker-popover-width:          calc(7 * var(--a-size) + 6 * var(--a-space-1) + 2 * var(--a-space-2));
    --calendar-picker-popover-fg:             var(--a-fg);

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

    /* Nav buttons (prev/next) — secondary chrome at one notch below the
       control height (mirrors select's `calc(height - gap)` idiom); icon
       is a directional caret sized from the universal --a-caret-size. */
    --calendar-picker-nav-size:               calc(var(--a-size) - var(--a-space-2));
    --calendar-picker-nav-radius:             var(--a-radius-sm);
    --calendar-picker-nav-bg:                 transparent;
    --calendar-picker-nav-bg-hover:           var(--a-bg-muted);
    --calendar-picker-nav-fg:                 var(--a-fg-muted);
    --calendar-picker-nav-fg-hover:           var(--a-fg);
    --calendar-picker-nav-icon-size:          var(--a-caret-size);

    /* Weekday header — row height tracks the control height (one notch
       below, like nav); label font scales with the tier via --a-ui-size
       (de-emphasis comes from color + weight, not a frozen small size). */
    --calendar-picker-weekday-fg:             var(--a-fg-muted);
    --calendar-picker-weekday-size:           var(--a-ui-size);
    --calendar-picker-weekday-weight:         var(--a-weight-medium);
    --calendar-picker-weekday-height:         calc(var(--a-size) - var(--a-space-2));
    --calendar-picker-weekday-mb:             var(--a-space-1);

    /* Day cells — the interactive targets size from --a-size (control
       height) and scale their digits with --a-ui-size, exactly like a
       button/select row. */
    --calendar-picker-day-size:               var(--a-size);
    --calendar-picker-day-radius:             var(--a-radius);
    --calendar-picker-day-font-size:          var(--a-ui-size);
    --calendar-picker-day-bg:                 transparent;
    --calendar-picker-day-fg:                 var(--a-fg-subtle);
    --calendar-picker-day-bg-hover:           var(--a-bg-hover);
    --calendar-picker-day-fg-hover:           var(--a-fg);
    --calendar-picker-day-bg-selected-hover:  var(--a-accent-bg-hover);
    --calendar-picker-day-bg-selected:        var(--a-accent);
    --calendar-picker-day-fg-selected:        var(--a-accent-fg);
    --calendar-picker-day-fg-outside:         var(--a-fg-muted);
    --calendar-picker-day-fg-disabled:        var(--a-ui-text-disabled);
    --calendar-picker-day-today-border:       var(--a-accent);
    --calendar-picker-day-today-dot-size:     var(--a-space-0-5);
    --calendar-picker-day-today-dot-offset:   var(--a-space-1);
    --calendar-picker-day-grid-gap:           var(--a-space-px); /* 1px hairline between cells */
    --calendar-picker-day-focus-ring:         var(--a-focus-ring);

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

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

  :scope {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--calendar-picker-gap);
    min-width: 0;
    /* font-family floor on the host — internal fields/days inherit it. */
    font-family: var(--calendar-picker-font-family, var(--a-font-family-ui));
    font-size: var(--calendar-picker-font-size);
  }

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

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

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

  :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);
  }
  :scope[aria-invalid="true"]:focus-visible [slot="trigger"],
  :scope[error]:focus-visible [slot="trigger"] {
    box-shadow: var(--calendar-picker-trigger-focus-ring-invalid);
  }

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

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

/* ── 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);
  border: 1px solid var(--calendar-picker-popover-border);
  border-radius: var(--calendar-picker-popover-radius);
  background: var(--calendar-picker-popover-bg);
  box-shadow: var(--calendar-picker-popover-shadow);
  width: var(--calendar-picker-popover-width);
  font-family: inherit;
  font-size: var(--calendar-picker-font-size);
  color: var(--calendar-picker-popover-fg);
  /* 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);
  margin-block-end: var(--calendar-picker-header-mb);
}

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

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);
  height: var(--calendar-picker-nav-size);
  padding: 0;
  border: none;
  border-radius: var(--calendar-picker-nav-radius);
  background: var(--calendar-picker-nav-bg);
  color: var(--calendar-picker-nav-fg);
  cursor: pointer;
  transition:
    background var(--calendar-picker-duration) var(--calendar-picker-easing),
    color var(--calendar-picker-duration) var(--calendar-picker-easing);
  --a-icon-size: var(--calendar-picker-nav-icon-size);
}
calendar-picker-ui [data-cal-prev]:hover,
calendar-picker-ui [data-cal-next]:hover {
  background: var(--calendar-picker-nav-bg-hover);
  color: var(--calendar-picker-nav-fg-hover);
}

/* 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);
  font-weight: var(--calendar-picker-weekday-weight);
  color: var(--calendar-picker-weekday-fg);
  margin-block-end: var(--calendar-picker-weekday-mb);
}

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

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

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

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

/* ── 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);
}

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

/* ── 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);
  font-weight: var(--calendar-picker-today-weight);
}
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);
  width: var(--calendar-picker-day-today-dot-size);
  height: var(--calendar-picker-day-today-dot-size);
  border-radius: 50%;
  background: var(--calendar-picker-day-today-border);
  transform: translateX(-50%);
  pointer-events: none;
}

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

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