@scope (time-picker-ui) {
  :where(:scope) {
    /* ── Tokens ── */
    --time-picker-bg-default:                  var(--a-ui-bg);
    --time-picker-fg-default:                  var(--a-ui-text);
    --time-picker-fg-muted-default:            var(--a-ui-text-placeholder);
    --time-picker-border-default:              var(--a-ui-border);
    --time-picker-border-hover-default:        var(--a-ui-border-hover);
    --time-picker-radius-default:              var(--a-radius);
    --time-picker-height-default:              var(--a-size);
    --time-picker-px-default:                  var(--a-ui-px);
    --time-picker-py-default:                  0;
    --time-picker-gap-default:                 var(--a-space-1);
    --time-picker-font-size-default:           var(--a-ui-size);

    --time-picker-segment-radius-default:      var(--a-radius-sm);
    --time-picker-segment-px-default:          var(--a-space-1);
    --time-picker-segment-bg-focus-default:    var(--a-accent);
    --time-picker-segment-fg-focus-default:    var(--a-accent-fg);

    --time-picker-separator-fg-default:        var(--a-fg-muted);

    --time-picker-focus-ring-default:          var(--a-focus-ring);
    --time-picker-focus-ring-invalid-default:  var(--a-focus-ring-invalid);

    --time-picker-duration-default:            var(--a-duration-fast);
    --time-picker-easing-default:              var(--a-easing);
  }

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: var(--time-picker-gap, var(--time-picker-gap-default));
    min-height: var(--time-picker-height, var(--time-picker-height-default));
    padding: var(--time-picker-py, var(--time-picker-py-default)) var(--time-picker-px, var(--time-picker-px-default));
    background: var(--time-picker-bg, var(--time-picker-bg-default));
    color: var(--time-picker-fg, var(--time-picker-fg-default));
    border: 1px solid var(--time-picker-border, var(--time-picker-border-default));
    border-radius: var(--time-picker-radius, var(--time-picker-radius-default));
    font-family: inherit;
    font-size: var(--time-picker-font-size, var(--time-picker-font-size-default));
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    cursor: text;
    transition:
      border-color var(--time-picker-duration, var(--time-picker-duration-default)) var(--time-picker-easing, var(--time-picker-easing-default)),
      background   var(--time-picker-duration, var(--time-picker-duration-default)) var(--time-picker-easing, var(--time-picker-easing-default)),
      box-shadow   var(--time-picker-duration, var(--time-picker-duration-default)) var(--time-picker-easing, var(--time-picker-easing-default));
  }

  /* ── Segments ── */
  :scope [data-segment] {
    display: inline-block;
    min-width: 2ch;
    padding: 0 var(--time-picker-segment-px, var(--time-picker-segment-px-default));
    text-align: center;
    border-radius: var(--time-picker-segment-radius, var(--time-picker-segment-radius-default));
    color: inherit;
    background: transparent;
    outline: none;
    caret-color: transparent;
    cursor: text;
    transition:
      background var(--time-picker-duration, var(--time-picker-duration-default)) var(--time-picker-easing, var(--time-picker-easing-default)),
      color      var(--time-picker-duration, var(--time-picker-duration-default)) var(--time-picker-easing, var(--time-picker-easing-default));
  }

  /* Meridiem is a touch wider since it carries two letters (AM/PM). */
  :scope [data-segment="meridiem"] {
    min-width: 2.5ch;
    text-transform: uppercase;
  }

  /* ── State: empty (placeholder via :empty) ── */
  :scope [data-segment]:empty::before {
    content: '--';
    color: var(--time-picker-fg-muted, var(--time-picker-fg-muted-default));
  }

  /* ── State: focused segment ── */
  :scope [data-segment]:focus,
  :scope [data-segment]:focus-visible {
    background: var(--time-picker-segment-bg-focus, var(--time-picker-segment-bg-focus-default));
    color: var(--time-picker-segment-fg-focus, var(--time-picker-segment-fg-focus-default));
    outline: none;
  }

  /* ── Separator ── */
  :scope [data-separator] {
    color: var(--time-picker-separator-fg, var(--time-picker-separator-fg-default));
    pointer-events: none;
    user-select: none;
  }
}

/* hover rules — outside @scope (matches input-ui's Safari 17.x workaround). */
time-picker-ui:not([disabled]):hover {
  border-color: var(--time-picker-border-hover, var(--time-picker-border-hover-default));
}

/* Focus ring on the host when any segment is focused.
   Canonical L3 ring; consumed via --time-picker-focus-ring (aliases --a-focus-ring). */
time-picker-ui:not([disabled]):focus-within {
  box-shadow: var(--time-picker-focus-ring, var(--time-picker-focus-ring-default));
}

time-picker-ui[aria-invalid="true"]:not([disabled]):focus-within,
time-picker-ui[error]:not([disabled]):focus-within {
  box-shadow: var(--time-picker-focus-ring-invalid, var(--time-picker-focus-ring-invalid-default));
}

/* Disabled / readonly affordance */
time-picker-ui[disabled] {
  opacity: var(--a-opacity-disabled, 0.5);
  pointer-events: none;
}

time-picker-ui[readonly] [data-segment] {
  cursor: default;
}
